jQuery | stop（）及其示例-yiteyi-C++库

stop（）方法是jQuery中的一个内置方法，用于停止选定元素当前正在运行的动画。

null

语法：

$(selector).stop(stopAll, goToEnd);

参数： 该方法接受两个参数，如下所述：

停止播放： 它是可选参数，该参数的值为布尔值。此参数用于指定是否停止排队的动画。此参数的默认值为false。
goToEnd： 它是可选参数，该参数的值为布尔值。此参数用于指定是否立即完成所有动画。此参数的默认值为false。

返回值： 此方法返回应用了stop方法的选定元素。

以下示例说明了jQuery中的stop（）方法：

例1： 本例不包含任何参数。

                     <!DOCTYPE html>                   
                     <                               html                               >                   
                                         <                               head                               >                   
                                         <                               title                               >The stop Method</                               title                               >                   
                                         <                               script                               src                               =                   
                                         "                       https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                      "                               >                   
                                         </                               script                               >                   
                             
                                         <!-- jQuery code to show the working of this method -->                   
                                         <                               script                               >                   
                                         $(document).ready(function() {                   
                                         $("#gfg_start").click(function() {                   
                                         $("div").animate({                   
                                         height: 300                   
                                         }, 1000);                   
                                         $("div").animate({                   
                                         width: 300                   
                                         }, 1000);                   
                                         });                   
                                         $("#gfg_stop").click(function() {                   
                                         $("div").stop();                   
                                         });                   
                                         });                   
                                         </                               script                               >                   
                                         <                               style                               >                   
                                         div {                   
                                         background: green;                   
                                         height: 60px;                   
                                         width: 60px;                   
                                         }                   
                                         button {                   
                                         margin-bottom:30px;                   
                                         }                   
                                         </                               style                               >                   
                                         </                               head                               >                   
                                         <                               body                               >                   
                                         <!-- click on this button and animation will start -->                   
                                         <                               button                               id                               =                               "gfg_start"                               >Start</                               button                               >                   
                                         <!-- click on this button and animation will stop -->                   
                                         <                               button                               id                               =                               "gfg_stop"                               >Stop</                               button                               >                   
                                         <                               div                               ></                               div                               >                   
                                         </                               body                               >                   
                     </                               html                               >                   

输出：

例2： 此示例包含参数。

                     <!DOCTYPE html>                   
                     <                               html                               >                   
                                         <                               head                               >                   
                                         <                               title                               > The stop Method</                               title                               >                   
                                         <                               script                               src                               =                   
                                         "                       https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                      "                               >                   
                                         </                               script                               >                   
                             
                                         <                               script                               >                   
                                         $(document).ready(function() {                   
                                         var div = $("div");                   
                                         $("#start").click(function() {                   
                                         div.animate({                   
                                         height: 280                   
                                         }, "slow");                   
                                         div.animate({                   
                                         width: 280                   
                                         }, "slow");                   
                                         div.animate({                   
                                         height: 120                   
                                         }, "slow");                   
                                         div.animate({                   
                                         width: 120                   
                                         }, "slow");                   
                                         });                   
                                         $("#stop").click(function() {                   
                                         div.stop(true, true);                   
                                         });                   
                                         });                   
                                         </                               script                               >                   
                                         <                               style                               >                   
                                         div {                   
                                         background: green;                   
                                         height: 100px;                   
                                         width: 100px;                   
                                         }                   
                                         button {                   
                                         margin-bottom:30px;                   
                                         }                   
                                         </                               style                               >                   
                                         </                               head                               >                   
                                         <                               body                               >                   
                                         <!-- click on this button and animation will start -->                   
                                         <                               button                               id                               =                               "start"                               >Start </                               button                               >                   
                                         <!-- click on this button and animation will stop -->                   
                                         <                               button                               id                               =                               "stop"                               >Stop </                               button                               >                   
                                         <                               div                               ></                               div                               >                   
                                         </                               body                               >                   
                     </                               html                               >                   

输出：

文章版权归作者所有，未经允许请勿转载。

THE END

Javascript