?

1 // 為了看效果，隨意寫(xiě)的動(dòng)畫(huà) 2 $('#animater').animate({ 3 'right':-800 4 }, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal'); 5 6 7 8 9 // 點(diǎn)擊不同的button執(zhí)行不同的操作 10 11 $('#button1').click(function(){ 12 //默認(rèn)參數(shù)是false，不管寫(xiě)一個(gè)false還是兩個(gè)false還是沒(méi)寫(xiě)false效果一樣 13 $('#animater').stop(); 14 }); 15 $('#button2').click(function(){ 16 //第二個(gè)參數(shù)默認(rèn)false 17 $('#animater').stop(true); 18 }); 19 $('#button3').click(function(){ 20 $('#animater').stop(false,true); 21 }); 22 $('#button4').click(function(){ 23 $('#animater').stop(true,true); 24 });

?

?

?

?

W3School上是這樣的說(shuō)明的：

stop(stopAll,goToEnd)

參數(shù)描述

stopAll	可選。規(guī)定是否停止被選元素的所有加入隊(duì)列的動(dòng)畫(huà)。
goToEnd	可選。規(guī)定是否允許完成當(dāng)前的動(dòng)畫(huà)。 該參數(shù)只能在設(shè)置了 stopAll 參數(shù)時(shí)使用。

我的理解：

stopAll 為false時(shí)，不停止被選元素所有加入隊(duì)列的動(dòng)畫(huà),僅停止當(dāng)前的動(dòng)畫(huà)。stopAll為true時(shí)，停止所有加入隊(duì)列的動(dòng)畫(huà)（如goToend為true，直接跳到當(dāng)前動(dòng)畫(huà)的最終效果）。

goToend為false時(shí)，不允許直接跳到當(dāng)前動(dòng)畫(huà)的最終效果(應(yīng)該就是所謂的完成當(dāng)前的動(dòng)畫(huà)吧)，goToend為true時(shí)，允許直接跳到完成當(dāng)前動(dòng)畫(huà)的最終末尾效果

?

每次運(yùn)行頁(yè)面,animater運(yùn)動(dòng)時(shí)，點(diǎn)擊不同button,看到如下不同的效果（animater處在動(dòng)畫(huà)1時(shí)點(diǎn)擊）：

點(diǎn)擊按鈕button1（stop()），由于兩個(gè)參數(shù)都是false。所以點(diǎn)擊發(fā)生時(shí)，animater沒(méi)有跳到當(dāng)前動(dòng)畫(huà)（動(dòng)畫(huà)1）的最終效果，而直接進(jìn)入動(dòng)畫(huà)2，然后動(dòng)畫(huà)3，4，5.直至完成整個(gè)動(dòng)畫(huà)。

點(diǎn)擊按鈕button1（stop(true)），由于第一個(gè)是true，第二個(gè)是false，所以animater立刻全部停止了，動(dòng)畫(huà)不動(dòng)了。

點(diǎn)擊按鈕button1（stop(false,true)），由于第一個(gè)是false，第 二個(gè)是true，所以點(diǎn)擊發(fā)生時(shí)，animater身處的當(dāng)前動(dòng)畫(huà)（動(dòng)畫(huà)1）停止并且animater直接跳到當(dāng)前動(dòng)畫(huà)（動(dòng)畫(huà)1）的最終末尾效果位置，接 著正常執(zhí)行下面的動(dòng)畫(huà)（動(dòng)畫(huà)2，3，4，5），直至完成整個(gè)動(dòng)畫(huà)。

點(diǎn)擊按鈕button1（stop(true，true)），由于兩個(gè)都是true，所以點(diǎn)擊發(fā)生時(shí)，animater跳到當(dāng)前動(dòng)畫(huà)（動(dòng)畫(huà)1）的最終末尾效果位置，然后，全部動(dòng)畫(huà)停止。

?

工作中遇到過(guò)的實(shí)際案例：

我在項(xiàng)目里做的一個(gè)下拉菜單，當(dāng)鼠標(biāo)移上去的時(shí)候就菜單顯示，當(dāng)鼠標(biāo)離開(kāi)的時(shí)候菜單隱藏

如果我快速不斷地將鼠標(biāo)移入移出菜單（即，當(dāng)菜單下拉動(dòng)畫(huà)未完成時(shí)，鼠標(biāo)又移出了菜單）就會(huì)產(chǎn)生“動(dòng)畫(huà)積累"，當(dāng)鼠標(biāo)停止移動(dòng)后，積累的動(dòng)畫(huà)還會(huì)持續(xù)執(zhí)行，直到動(dòng)畫(huà)序列執(zhí)行完畢。 解決方法：在寫(xiě)動(dòng)畫(huà)效果的代碼前加入stop(true，true)，這樣每次快速的移入移出菜單，就正常了，當(dāng)移入一個(gè)菜單的時(shí)候，停止所有加入隊(duì)列的動(dòng)畫(huà)，但是完成當(dāng)前的動(dòng)畫(huà)（跳至當(dāng)前動(dòng)畫(huà)的最終效果位置） 轉(zhuǎn)載自http://www.cnblogs.com/wenzichiqingwa/archive/2012/11/21/2780996.html 完全是轉(zhuǎn)發(fā)，若有版權(quán)問(wèn)題，請(qǐng)聯(lián)系我。

轉(zhuǎn)載于:https://www.cnblogs.com/Sinhtml/p/3747561.html

總結(jié)

以上是生活随笔為你收集整理的jquery之stop()的用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。