jQuery stop()用法實例詳解
近期查看前輩的代碼，發(fā)現(xiàn)在使用animate()的時候前面需要加上stop()，來防止移進移出的閃動問題，但卻不知道stop()里面參數(shù)的真正意思，今天查了下stop()中參數(shù)的意義和具體使用方法，分享給大家。
stop(true)等價于stop(true,false): 停止被選元素的所有加入隊列的動畫。
stop(true,true):停止被選元素的所有加入隊列的動畫，但允許完成當前動畫。
stop()等價于stop(false,false):停止被選元素當前的動畫，但允許完成以后隊列的所有動畫。
stop(false,true):立即結(jié)束當前的動畫到最終效果，然后完成以后隊列的所有動畫。
$(selector).stop(stopAll,goToEnd)
stopAll:可選。規(guī)定是否停止被選元素的所有加入隊列的動畫。
goToEnd:可選。規(guī)定是否允許完成當前的動畫。該參數(shù)只能在設置了 stopAll 參數(shù)時使用。
第一個參數(shù)的意思是是否清空動畫序列，也就是停止的是當前元素的動畫效果還是停止后面附帶的所有動畫效果，一般為false，跳過當前動畫效果，執(zhí)行下一個動畫效果；
第二個參數(shù)是是否將當前動畫效果執(zhí)行到最后，意思就是停止當前動畫的時候動畫效果剛剛執(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;
/*為了移動，需設置此屬性*/
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(){
//默認參數(shù)是false，不管寫一個false還是兩個false還是沒寫false效果一樣
$('#box').stop();
});
$('#button2').click(function(){
//第二個參數(shù)默認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()用法實例詳解 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
deferred對象是jQuery的回調(diào)函數(shù)解決方案，jQuery之前的版本中異步回調(diào)這塊做的不是很好，所以后期補上了該解決方案。接下來通過本文給大家介紹jQuery中的derferred使用方法，非常不錯，需要的朋友參考下2017-03-03
這篇文章主要介紹了jQuery實現(xiàn)的鼠標響應緩沖動畫效果,涉及jQuery事件響應、數(shù)值運算及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-02-02
大家在做省市區(qū)下拉框聯(lián)動,或者是產(chǎn)品分類聯(lián)動,或者是部門聯(lián)動等下拉框時怎么做? 是用ajaxpro.dll 還是jquery ajax呢2010-12-12
使用jquery為table動態(tài)添加行的實現(xiàn)代碼
最近，有需要做一個動態(tài)的給table，添加行，用了點時間，算是做成了。已測試過，但如果發(fā)現(xiàn)有什么bug，可以留言，歡迎拍磚。大家一起進步。2011-03-03
在使用PDFObject.js時，由于后臺需要轉(zhuǎn)換數(shù)據(jù)，在前臺顯示的時候，有很長一段時間顯示空白頁面，所以想到寫一個假的加載動畫，下面看下實現(xiàn)代碼2016-12-12
這篇文章主要介紹了jquery移動節(jié)點的實現(xiàn)方法,主要涉及append()方法的使用技巧,需要的朋友可以參考下2015-01-01
jQuery動態(tài)設置form表單的enctype值(實現(xiàn)代碼)
本篇文章是對在jQuery中動態(tài)設置form表單的enctype值的實現(xiàn)代碼進行了詳細的分析介紹，需要的朋友參考下2013-07-07
本文重點給大家介紹了jQuery中的2個函數(shù)hover和toggle的使用方法和示例，非常的簡單實用，推薦給小伙伴們參考下。2015-02-02
slides是一款強大的，專業(yè)的幻燈片組件，能夠全方位對幻燈片的速度控制，本文通過代碼實例給大家講解jquery.slides.js，感興趣的朋友一起學習2015-11-11
本實例只利用到JQuery類庫本身的函數(shù)和功能，不需要第三方插件的支持。另外，所有表單信息都是利用PHPMailer類庫郵件的形式發(fā)送給管理員。2009-11-11