jQuery stop()用法實例詳解
近期查看前輩的代碼,發(fā)現(xiàn)在使用animate()的時候前面需要加上stop(),來防止移進(jìn)移出的閃動問題,但卻不知道stop()里面參數(shù)的真正意思,今天查了下stop()中參數(shù)的意義和具體使用方法,分享給大家。
stop(true)等價于stop(true,false): 停止被選元素的所有加入隊列的動畫。
stop(true,true):停止被選元素的所有加入隊列的動畫,但允許完成當(dāng)前動畫。
stop()等價于stop(false,false):停止被選元素當(dāng)前的動畫,但允許完成以后隊列的所有動畫。
stop(false,true):立即結(jié)束當(dāng)前的動畫到最終效果,然后完成以后隊列的所有動畫。
$(selector).stop(stopAll,goToEnd)
stopAll:可選。規(guī)定是否停止被選元素的所有加入隊列的動畫。
goToEnd:可選。規(guī)定是否允許完成當(dāng)前的動畫。該參數(shù)只能在設(shè)置了 stopAll 參數(shù)時使用。
第一個參數(shù)的意思是是否清空動畫序列,也就是停止的是當(dāng)前元素的動畫效果還是停止后面附帶的所有動畫效果,一般為false,跳過當(dāng)前動畫效果,執(zhí)行下一個動畫效果;
第二個參數(shù)是是否將當(dāng)前動畫效果執(zhí)行到最后,意思就是停止當(dāng)前動畫的時候動畫效果剛剛執(zhí)行了一半,這個時候想要的是動畫執(zhí)行之后的效果,那么這個參數(shù)就為true。否則動畫效果就會停在stop執(zhí)行的時候。
下面是從網(wǎng)上找的一個小例子,足夠幫助大家理解stop()的使用了。
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>stop的用法案例</title> <style type="text/css"> #animater{ width: 150px; background:activeborder; border: 1px solid black; /*為了移動,需設(shè)置此屬性*/ position: relative; } </style> <script type="text/javascript" src='/style/js/jquery-1.10.2.min.js'></script> <script type="text/javascript"> $(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); }); // 點擊不同的button執(zhí)行不同的操作 $('#button1').click(function(){ //默認(rèn)參數(shù)是false,不管寫一個false還是兩個false還是沒寫false效果一樣 $('#box').stop(); }); $('#button2').click(function(){ //第二個參數(shù)默認(rèn)false $('#box').stop(true); }); $('#button3').click(function(){ $('#box').stop(false,true); }); $('#button4').click(function(){ $('#box').stop(true,true); }); }) </script> </head> <body> <p><input type='button' value='開始測試' id='start'></p> <div id="button"> <input type="button" id="button1" value="stop()"/> <input type="button" id="button2" value="stop(true)"/> <input type="button" id="button3" value="stop(false,true)"/> <input type="button" id="button4" value="stop(true,true)"/> </div> <div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">stop運動參數(shù)測試</div> </body> </html>
以上所述是小編給大家介紹的jQuery stop()用法實例詳解 ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery實現(xiàn)的鼠標(biāo)響應(yīng)緩沖動畫效果示例
這篇文章主要介紹了jQuery實現(xiàn)的鼠標(biāo)響應(yīng)緩沖動畫效果,涉及jQuery事件響應(yīng)、數(shù)值運算及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-02-02使用jquery為table動態(tài)添加行的實現(xiàn)代碼
最近,有需要做一個動態(tài)的給table,添加行,用了點時間,算是做成了。已測試過,但如果發(fā)現(xiàn)有什么bug,可以留言,歡迎拍磚。大家一起進(jìn)步。2011-03-03jQuery動態(tài)設(shè)置form表單的enctype值(實現(xiàn)代碼)
本篇文章是對在jQuery中動態(tài)設(shè)置form表單的enctype值的實現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-07-07