jQuery stop() 的示例
jQuery 中的 stop() 方法用於在動畫結束之前停止動畫。
語法
語法如下 −
$(selector).stop(stopAll,goToEnd);
上面,stopAll 清除所有動畫,而 gotoEnd 用於指定是否立刻完成當前動畫。
示例
現在讓我們看一個例子來實現 jQuery stop() 方法 −
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".button1").click(function(){ var div = $("div"); div.animate({height: 250}, "slow"); div.animate({left: "+=200",top: "+=100" }, "slow"); div.queue(function(){ div.dequeue(); }); div.animate({height: 150}, "slow"); div.animate({left: "10",top: "100" }, "slow"); $(".button2").click(function(){ $("div").stop(); }); }); }); </script> <style> div { width:150px; height:150px; position:absolute; left:10px; top:100px; background-color:orange; } </style> </head> <body> <button class="button1">Begin</button> <button class="button2">Stop</button> <div></div> </body> </html>
輸出
這將產生以下輸出 −
在單擊“開始”後,動畫開始 −
在單擊“停止”後,動畫停止 −
廣告