jQuery 停止动画

  • 1,952

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

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

jQuery 停止动画 jQuery 停止动画 jQuery 停止动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style media="screen">
    button{
      border:1px solid #ccc;
      cursor:pointer;
      display:block;
      margin:auto;
      position:relative;

      }
</style>
<script>
$(function(){
    $('#but').click(function(){
      $("div p").animate({width:'150px',height:'150px'},500);
      $("div p").animate({width:'100px',height:'100px'},500);
			$("div p").animate({width:'150px',height:'150px'},500);
      $("div p").animate({width:'100px',height:'100px'},500);
    })
    $('#shop').click(function(){
		//$("div p").stop();
		//shop不加参数只会停止当前执行的动画,后面的队列还会继续执行
		//$("div p").stop(true);
		//停止当前动画,并清除队列
    $("div p").stop(true,true);
		//快速完成当前动作,并停止它。

    })
  })
</script>
</head>

<body>

  <button id="but">开始动画</button>
  <BR>
  <button id="shop">暂停</button>
  <div style="margin: 0 auto;margin-top:80px;">
    <p style="width:100px;height:100px;margin: 0 auto;background:red;">12321</p>
  </div>
  <br><br><br>
  <br><br><br>
</body>
</html>

 

历史上的今天
3月
12
weinxin
我的微信
这是我的微信扫一扫
开拓者博主
  • 本文由 发表于 2018年3月12日21:48:46
  • 转载请务必保留本文链接:https://www.150643.com/494.html
匿名

发表评论

匿名网友 填写信息