【零基础学习web前端】jQuery 停止动画

Amy · 发表于 2019-1-18 16:23:26

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

http://www.sufeinet.com/thread-24027-1-1.html

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>

效果：

竹林风 · 发表于 2019-1-18 17:31:38

我只是路过打酱油的。

		自动登录	找回密码
密码			马上注册

[零基础学习web前端] 【零基础学习web前端】jQuery 停止动画

相关帖子