jquery stop()方法

最新推荐文章于 2020-09-08 19:39:36 发布

whaxrl

最新推荐文章于 2020-09-08 19:39:36 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签： jquery

jquery 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

jQuery中stop()函数用于停止当前匹配元素上正在运行的动画。

停止动画并不是恢复到该动画执行前的状况，而是直接停止，当前动画执行到什么状态，就停留在什么状态。

例如：执行一个元素高度从100px到200px的过渡动画，当高度为150px时停止了该动画，则当前高度仍然保持150px的现状。如果该动画设置了执行完毕后的回调函数，则不会执行该回调函数。

一、jquery stop()语法

$(selector).stop(stopAll,goToEnd)

参数说明

1、stopAll

可选。代表是否要清空未执行完的动画队列。

意思就是如果该参数值为true，则会停止所有后续动画或事件。如果该参数值为false，则只停止被选元素当前执行的动画，后续动画不受影响。因此，该参数一般都为false。

如果使用stop()方法，则会立即停止当前正在运行的动画，如果接下来还有动画等待执行，则以当前状态开始接下来的动画。

2、goToEnd

可选。代表是否直接将正在执行的动画跳转到当前动画的末尾。

规定是否允许完成当前动画，该参数只能在设置了stopAll参数时使用

3、备注

默认情况下，不写参数，则会被认为两个参数都是false。

二、jquery stop()实例

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery stop()</title>

<script type="text/javascript">
$(function(){
    $("button:eq(0)").click(function(){
        $("#panel").animate({height:"150" }, 1000).animate({width:"300" },
            1000).hide(2000).animate({height:"show", width:"show", opacity:"show" }, 1000).animate({height:"500"},
            1000);
    });

    //stop([clearQueue][,gotoEnd]);
　　//语法结构

    $("button:eq(1)").click(function(){
        $("#panel").stop();//停止当前动画，继续下一个动画
    });
    $("button:eq(2)").click(function(){
        $("#panel").stop(true);//清除元素的所有动画
    });
    $("button:eq(3)").click(function(){
        $("#panel").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
    });
    $("button:eq(4)").click(function(){
        $("#panel").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态
    });

})
</script>
</head>
<body>
<button>开始一连串动画</button>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>

<div id="panel">
    <h5 class="head">什么是jQuery?</h5>

    <div class="content">
        jQuery。
    </div>
</div>

</body>
</html>

实例说明

1、点击按钮（stop()），由于两个参数都是false。所以点击发生时，animater没有跳到当前动画（动画1）的最终效果，而直接进入动画2，然后动画3，4，5.直至完成整个动画。

2、点击按钮（stop(true)），由于第一个是true，第二个是false，所以animater立刻全部停止了，动画不动了。

3、点击按钮（stop(false,true)），由于第一个是false，第二个是true，所以点击发生时，animater身处的当前动画（动画1）停止并且animater直接跳到当前动画（动画1）的最终末尾效果位置，接着正常执行下面的动画（动画2，3，4，5），直至完成整个动画。

3、点击按钮（stop(true，true)），由于两个都是true，所以点击发生时，animater跳到当前动画（动画1）的最终末尾效果位置，然后，全部动画停止。

参考资料：jquery stop() http://www.studyofnet.com/news/1031.html