jquery stop()方法有什么用-LMLPHP

本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

在jquery中,stop()方法用于为被选元素停止当前正在运行的动画效果。

语法:

$(selector).stop(stopAll,goToEnd)
登录后复制

stopAll 和 goToEnd 都是可选参数,它们的取值都是布尔值,默认值都是 false。stopAll 表示停止队列动画。当取值为 false 时,仅停止当前动画;当取值为 true 时,停止当前动画以及后面所有的队列动画。goToEnd 表示将动画跳转到当前动画效果的最终状态。

其中,stop() 方法共有 4 种形式,如表 1 所示。

形式说明
stop()等价于 stop(false, false),仅停止当前动画,后面的动画还可以继续执行
stop(true)等价于 stop(true, false),停止当前动画,并且停止后面的动画
stop(true, true)当前动画继续执行,只停止后面的动画
stop(false, true)停止当前动画,跳到最后一个动画,并且执行最后一个动画

一般来说,在实际开发中我们只会用到 stop() 方法的第 1 个参数,很少用到第 2 个参数。

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:50px;
            height:50px;
            background-color:lightskyblue;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.color.js"></script>
    <script>
        $(function () {
            $("#btn-start").click(function () {
                $("div").animate({ "width": "200px" }, 2000)
                      .animate({ "background-color": "red" }, 2000)
                      .animate({ "height": "200px" }, 2000)
                      .animate({ "background-color": "blue" }, 2000);
            });
            $("#btn-stop").click(function () {
                $("div").stop();
            })
        })
    </script>
</head>
<body>
    <input id="btn-start" type="button" value="开始" />
    <input id="btn-stop" type="button" value="停止" /><br />
    <div></div>
</body>
</html>
登录后复制

预览效果下图所示。

jquery stop()方法有什么用-LMLPHP

在这个例子中,我们使用 animate() 方法定义了 4 个动画。我们点击【开始】按钮后,过了一会儿如果再点击【停止】按钮,就会立即停止当前执行的动画(也就是停止当前的 animate() 方法),然后跳到下一个动画(也就是下一个 animate() 方法)。

如果再次点击【停止】按钮,它又会跳到下一个动画,以此类推。小伙伴们可以自行测试来感受一下。

如果想要停止所有的队列动画,可以通过定义 stop() 方法的第一个参数为 true 来实现,代码如下:

$("#btn-stop").click(function () {
    $("div").stop(true);
})
登录后复制

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:50px;
            height:50px;
            background-color:lightskyblue;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("div").hover(function () {
                $(this).animate({ "height": "150px" }, 500);
            }, function () {
                $(this).animate({ "height": "50px" }, 500); //移出时返回原状态
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>
登录后复制

预览效果下图所示。

jquery stop()方法有什么用-LMLPHP

在这个例子中,我们使用 hover() 方法定义鼠标指针移入和鼠标指针移出时的动画效果。当我们快速地移入或移出元素时,会发现一个很奇怪的 bug:元素会不断地变长或变短!也就是说,动画会不断执行,根本停不下来。

这种“根本停不下来”的 bug 在实际开发中经常会碰到,小伙伴们一定要特别注意。实际上,这个 bug 是由动画累积所导致的。在 jQuery 中,如果一个动画没有执行完,它就会被添加到“动画队列”中去。在这个例子中,每一次移入或移出元素,都会产生一个动画,如果该动画没有被执行完,它就会被添加到动画队列中去,然后没有被执行完的动画会继续执行,直到所有动画执行完毕。

针对这个 bug,我们只需要在移入或移出元素产生的动画执行之前加入 stop() 方法,就能轻松解决。最终修改后的代码如下。

$("div").hover(function () {
    $(this).stop().animate({ "height": "150px" }, 500);
}, function () {
    $(this).stop().animate({ "height": "50px" }, 500);    //移出时返回原状态
})
登录后复制

对于这种由于动画累积产生的 bug,我们还可以通过is(":animated")来判断当前的动画状态并解决。对于is(":animated")这种方式,之后会详细介绍。

实际上,jQuery 还有一个方法可以中断动画——finish()。这个方法与 stop(true,true) 方法效果类似,因为它会清除排队的动画并使当前动画跳到最终值。不过,与 stop(true,true) 不同的是,它会使所有排队的动画都跳到各自的最终值。finish() 方法用得不多,我们简单了解一下即可。

【推荐学习:jQuery视频教程web前端开发视频

以上就是jquery stop()方法有什么用的详细内容,更多请关注Work网其它相关文章!

08-30 19:53