可以直接使用stop()函數來立即停止目前正在進行的動畫,這樣做的目的在於防止前一個動畫影響後面動畫的效果
在jQuery中可以透過stop()方法來終止動畫。它一般用於兩個動畫間的切換。因為有時滑鼠滑動的過快會導致動畫效果與滑鼠的動作不一致,這時就需要stop()來停止動畫。接下來在文章中將透過具體實例告訴大家如何使用stop方法
#【推薦課程:##jQuery教學】
stop() 方法適用於所有jQuery 效果函數,包括滑動、淡入淡出和自訂動畫等它有兩個參數為stopAll、 goToEnd stopAll表示是否應該清除動畫佇列。預設是 false,即僅停止活動的動畫,允許任何排入佇列的動畫向後執行goToEnd 表示是否立即完成目前動畫。預設是 false。 因此,預設地,stop() 會清除在被選元素上指定的目前動畫<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> <style type="text/css"> #stop{ margin-bottom:10px; } #panel,#flip { width:200px; padding:5px; text-align:center; background-color:pink; border:solid 1px #ccc; } #panel { display:none; } </style> </head> <body> <button id="stop">停止滑动</button> <div id="flip">点击向下滑动</div> <div id="panel">停止动画</div> </body> </html>
效果圖:
以上是jQuery中如何終止動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!