Jquery stop()方法
有时我们必须在动画结束之前停止动画。 jQuery中的
stop()方法用于立即停止匹配元素当前正在运行的动画。它是jQuery中的内置方法。
此方法接受两个可选的布尔参数，分别为
clearQueue 和
jumpToEnd 。当必须删除排队的动画时，使用
clearQueue 参数。
我们可以通过一个示例来了解排队的动画-假设我们要应用多个动画动画方法在同一元素上。因此，以后的动画将放置在该元素的队列中。队列中的动画不会在第一个动画完成之前开始。在这种情况下，当我们应用
stop()方法时，当前正在运行的动画将停止，但是队列中的下一个动画将立即开始。如果将
clearQueue 参数设置为
true ，则排队的动画将永远不会运行。
语法
$(selector).stop(clearQueue, jumpToEnd)
参数值
此方法的参数值定义如下。
clearQueue: 是可选参数。它是一个布尔值。设置为true时，排队的动画永远不会运行。它指定是否删除排队的动画。其默认值为
false。
jumpToEnd: 也是布尔值。它是一个可选参数。其默认值为false。它指定是否立即完成当前动画。
让我们看一些示例来了解
stop()方法。
Example1
这是使用
stop()方法的简单示例。在此示例中，我们没有指定
stop()方法的任何可选参数。有两个名为
开始和
停止的按钮。单击
开始按钮时会出现一个
div 元素，单击
Stop 按钮会停止动画。
<!DOCTYPE html>
<html>
<head>
<title> jquery stop() method </title>
<script src = "/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("#start").click(function() {
$("div").text("Welcome to the lidihuo.com").animate({ width: 400 }, 2000);
});
$("#stop").click(function() {
$("div").stop();
});
});
</script>
<style>
div {
background: lightgreen;
border: 4px dashed blue;
font-size: 25px;
height: 60px;
width: 60px;
margin-top: 15px;
}
</style>
</head>
<body>
<h4> This is an example of using jQuery's stop() method. </h4>
<button id = "start"> Start </button>
<button id = "stop"> Stop </button>
<div></div>
</body>
</html>
输出
This is an example of using jQuery's stop() method.
Example2
在此示例中，我们同时使用了
stop()函数的两个可选参数，并将它们的值设置为
true 。我们要在其上应用多个动画的
div 元素。
开始和
停止这两个按钮可以相应地启动或停止动画。
<!DOCTYPE html>
<html>
<head>
<title> jquery stop() method </title>
<script src = "/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("#start").click(function() {
$("div").animate({height: 250 }, "slow").text("Welcome to the lidihuo.com");
$("div").animate({width: 250 }, "slow");
$("div").animate({height: 50 }, "slow");
$("div").animate({width: 400 }, "slow");
});
$("#stop").click(function() {
$("div").stop(true, true);
});
});
</script>
<style>
div {
background: lightgreen;
border: 4px dashed blue;
font-size: 25px;
height: 60px;
width: 60px;
margin-top: 15px;
}
</style>
</head>
<body>
<h4> This is an example of using jQuery's stop() method. </h4>
<button id = "start"> Start </button>
<button id = "stop"> Stop </button>
<div></div>
</body>
</html>
输出
This is an example of using jQuery's stop() method.
