您好,登錄后才能下訂單哦!
這篇文章主要介紹jQuery如何使用stop()方法停止動畫,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
jQuery 停止動畫
jQuery stop() 方法用于在動畫或效果完成前對它們進行停止。
jQuery stop() 方法
jQuery stop() 方法用于停止動畫或效果,在它們完成之前。
stop() 方法適用于所有 jQuery 效果函數,包括滑動、淡入淡出和自定義動畫。
語法:
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false,即僅停止活動的動畫。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
因此,默認地,stop() 會清除在被選元素上指定的當前動畫:
<!DOCTYPE html> <html> <head> <script src="../jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <button id="stop">停止滑動</button> <div id="flip">點擊這里,向下滑動面板</div> <div id="panel">Hello world!</div> </body> </html>
jQuery stop() 動畫實例(帶參數)
<!DOCTYPE html> <html> <head> <script src="../jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#start").click(function(){ $("div").animate({left:"100px"},5000); $("div").animate({fontSize:"3em"},5000); }); $("#stop").click(function(){ $("div").stop(); }); $("#stop2").click(function(){ $("div").stop(true); }); $("#stop3").click(function(){ $("div").stop(true,true); }); }); </script> </head> <body> <button id="start">開始</button> <button id="stop">停止</button> <button id="stop2">停止所有</button> <button id="stop3">停止但要完成</button> <p><b>"開始"</b> 按鈕會啟動動畫。</p> <p><b>"停止"</b> 按鈕會停止當前活動的動畫,但允許已排隊的動畫向前執行。</p> <p><b>"停止所有"</b> 按鈕停止當前活動的動畫,并清空動畫隊列;因此元素上的所有動畫都會停止。</p> <p><b>"停止但要完成"</b> 會立即完成當前活動的動畫,然后停下來。</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> </body> </html>
以上是“jQuery如何使用stop()方法停止動畫”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。