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 bianchenghao6.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 bianchenghao6.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.

Jquery trigger()方法

Jquery siblings()方法