★★停止动画和停止所有动画$(selector).stop() 详解

jQuery stop() 方法

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

语法：$(selector).stop(stopAll,goToEnd);

 

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

 

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

 

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

 

1、$("div").stop(); //停止当前活动的动画，但允许已排队的动画向前执行。（即：停止当前动画，跳入下一个动画）

2、$("div").stop(true); //按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。

3、$("div").stop(true,true); //会立即完成当前活动的动画，然后停下来。（即：停止所有动画，跳到当前动画终点）

4、$("div").stop(true,false); //停止所有动画，保持当前状态

 

实例：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#start").click(function(){
    $("div").animate({left:'100px'},5000);
    $("div").animate({fontSize:'3em'},5000);
  });
  
  $("#stop").click(function(){
    $("div").stop();      //停止当前活动的动画，但允许已排队的动画向前执行。
  });

  $("#stop2").click(function(){
    $("div").stop(true);   //按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。
  });

  $("#stop3").click(function(){
    $("div").stop(true,true);   //会立即完成当前活动的动画，然后停下来。
  });
  
});
</script> 
</head>
<body>

<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p> 

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>
</html>

 

实例二、

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动画效果</title>
<%--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--%>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>  
 <script type="text/javascript">
    $(document).ready(function () {
        $("#begin").click(function () {
            for (var i = 0; i < 5; i++) {
                $("div").animate({
                    left: '250px',
                    opacity: '0.5',//透明度
                    height: '150px',
                    width: '150px'
                }, 'slow');
                $("#sec").show('slow');
                $("div").animate({
                    left: '0px',
                    opacity: '1',
                    height: '100px',
                    width: '100px'
                }, 'slow');
                $("#sec").hide('slow');
            }

        });
        //停止当前动画，跳入下一个动画
        $("#stop").click(function () {
            $("div").stop();
        })
        //停止所有动画，保持当前状态
        $("#stop1").click(function () {
            $("div").stop(true,false);
        })
        //停止所有动画，跳到当前动画终点
        $("#stop2").click(function () {
            $("div").stop(true, true);
        })
        /*
        $(selector).stop(stopAll,goToEnd);
        可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
        可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
        因此，默认地，stop() 会清除在被选元素上指定的当前动画。
        下面的例子演示 stop() 方法，不带参数：
        实例
        */
    });
</script> 
</head>

<body> 
 <button id="begin">开始动画</button> <button id="stop">停止当前动画，进入下一个动画</button>
    <button id="stop1">瞬间停止</button><button id="stop2">停止所有动画，跳到当前动画终点</button>
 默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    <p id="sec" style="display:none;">第二次才显示 
</div> 
 </body>
</html>

 

posted @ 2014-08-06 16:22  Shimily  阅读(487)  评论(0)    收藏  举报