苏飞论坛

标题: 【零基础学习web前端】jQuery 停止动画 [打印本页]

作者: Amy    时间: 2019-1-18 16:23
标题: 【零基础学习web前端】jQuery 停止动画
【零基础学习web前端】jQuery 停止动画

【零基础学习web前端】教程目录导航


jQuery stop() 方法用于在动画或效果完成前对它们进行停止。


jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。

实例:
[JavaScript] 纯文本查看 复制代码
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  #box,#content{
    width: 500px;
    line-height: 30px;
    text-align: center;
    background:#e5eecc;
    border: 1px solid #e5e5e5;
  }
  #content{
    height: 200px;
    display: none;
  }
</style>
</head>
<body>
  <button id="btn">停止</button>
  <div id="box">点击此处,向下滑动</div>
  <div id="content">苏飞论坛</div>
  <script src="jquery.js"></script>
  <script>
    $(document).ready(function(){
      $('#box').click(function(){
        $('#content').slideDown(5000);
      }) ;
      $('#btn').click(function(){
        $('#content').stop();
      })
    })
</script>
</body>
</html>

效果:
(, 下载次数: 143)