彻底搞懂jQuery.stop()函数

最新推荐文章于 2023-08-25 11:34:20 发布

front_end_fan

最新推荐文章于 2023-08-25 11:34:20 发布

阅读量3.9k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_39198420/article/details/77837196

版权

jquery 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

jQuery.stop() 函数详解

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

默认情况下，stop()函数只会停止当前正在运行的动画。如果你使用animate()函数为当前元素设置了A、B、C这3段动画，如果当前正在执行的动画是A，则只会停止动画A的执行，不会阻止动画B和C的执行。当然，你也可以通过指定可选的选项参数来停止所有的动画。

停止动画并不是恢复到该动画执行前的状况，而是直接停止，当前动画执行到什么状态，就停留在什么状态。例如：执行一个元素高度从100px到200px的过渡动画，当高度为150px时停止了该动画，则当前高度仍然保持150px的现状。如果该动画设置了执行完毕后的回调函数，则不会执行该回调函数。

语法

jQuery 1.2 新增该函数。

jQueryObject.stop( [ queueName ] [, clearQueue [, jumpToEnd ] ] )

参数

参数	描述
queueName	可选/String类型需要停止动画的队列名称，默认为"fx"。
clearQueue	可选/Boolean类型是否清空队列中的所有动画，默认值为`false`。
jumpToEnd	可选/Boolean类型指示是否直接完成当前动画，默认值为`false`。

jQuery 1.7 新增支持：参数queueName。如果没有指定，则默认为"fx"，表示jQuery标准的效果队列。

如果参数jumpToEnd为true，则不再缓慢执行当前动画，而是直接完成。此时，元素将会保持动画执行完毕后的状态。

返回值

stop()函数的返回值为jQuery类型，返回当前jQuery对象本身。

示例&说明

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(function(){
            $("#exec").click( function(){
                var $myDiv = $("#myDiv");
                // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px)
                $myDiv.animate( { height: "+=300px" }, 2000 );
                $myDiv.animate( { width: "50%" }, 1000 );
                $myDiv.animate( { width: "200px", height: "100px" }, 1000 );
            } );

            $("#stop").click( function(){
                var v = $("#animation").val();
                var $myDiv = $("#myDiv");
                if(v == "1"){
                    $myDiv.stop( ); // 停止当前动画，不清空队列
                }else if(v == "2"){
                    $myDiv.stop( true ); // 停止当前动画，清空队列(停止全部)
                }else if(v == "3"){
                    $myDiv.stop( "fx", true ); // 等同于"2"
                }else if(v == "4"){
                    $myDiv.stop( true, true ); // 清空队列，直接完成当前动画
                }
            } );
        })
    </script>
</head>
<body>
    <p>
        停止效果：
        <select id="animation">
            <option value="1">停止1</option>
            <option value="2">停止2</option>
            <option value="3">停止3</option>
            <option value="4">停止4</option>
        </select>
        <input id="exec" type="button" value="执行动画" />
        <input id="stop" type="button" value="停止动画" />
    </p>
    <div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>
</body>
</html>

front_end_fan

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
彻底搞懂jQuery.stop()函数

jQuery.stop() 函数详解stop()函数用于停止当前匹配元素上正在运行的动画。默认情况下，stop()函数只会停止当前正在运行的动画。如果你使用animate()函数为当前元素设置了A、B、C这3段动画，如果当前正在执行的动画是A，则只会停止动画A的执行，不会阻止动画B和C的执行。当然，你也可以通过指定可选的选项参数来停止所有的动画。停止动画
复制链接

扫一扫