目的：為了 了解stop()的用法，舉個(gè)例子，直觀的方式看看。

實(shí)物：一個(gè)id="animater"的div包含了一段文字。(以下用animator表示實(shí)物)

動(dòng)畫最終的完整效果：animater向右移動(dòng)800px（這個(gè)完整的過程是動(dòng)畫1），然后，字體逐漸變大（這個(gè)完整的過程是動(dòng)畫2），然后，透明度逐漸降低到0（這個(gè)完整的過程是動(dòng)畫3），然后透明度逐漸恢復(fù)到1（這個(gè)完整的過程是動(dòng)畫4），然后字體大小變?yōu)?6px同時(shí)移動(dòng)到距離左邊界200px的位置（這個(gè)完整的過程是動(dòng)畫5）.

操作：點(diǎn)擊不同id的button，觀看效果。

HTML代碼：

       <div id="animater">
            stop()方法測試
        </div>

        <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>

CSS代碼：

         #animater{
                width: 150px;
                background:activeborder;
                border: 1px solid black;
                /*為了移動(dòng)，需設(shè)置此屬性*/
                position: relative;
            }

jquery代碼：

              //            為了看效果，隨意寫的動(dòng)畫
                $('#animater').animate({
                    'right':-800
                }, 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');



        
                //           點(diǎn)擊不同的button執(zhí)行不同的操作
        
                $('#button1').click(function(){
                    //默認(rèn)參數(shù)是false，不管寫一個(gè)false還是兩個(gè)false還是沒寫false效果一樣
                    $('#animater').stop();
                });
                $('#button2').click(function(){
                    //第二個(gè)參數(shù)默認(rèn)false
                    $('#animater').stop(true);
                });
                $('#button3').click(function(){
                    $('#animater').stop(false,true);
                });
                $('#button4').click(function(){
                    $('#animater').stop(true,true);
                });

W3School上是這樣的說明的：

stop(stopAll,goToEnd)

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

我的理解：

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

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

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

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

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

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

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

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

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

如果我快速不斷地將鼠標(biāo)移入移出菜單（即，當(dāng)菜單下拉動(dòng)畫未完成時(shí)，鼠標(biāo)又移出了菜單）就會(huì)產(chǎn)生“動(dòng)畫積累"，當(dāng)鼠標(biāo)停止移動(dòng)后，積累的動(dòng)畫還會(huì)持續(xù)執(zhí)行，直到動(dòng)畫序列執(zhí)行完畢。

解決方法：在寫動(dòng)畫效果的代碼前加入stop(true，true)，這樣每次快速的移入移出菜單，就正常了，當(dāng)移入一個(gè)菜單的時(shí)候，停止所有加入隊(duì)列的動(dòng)畫，但是完成當(dāng)前的動(dòng)畫（跳至當(dāng)前動(dòng)畫的最終效果位置）

總結(jié)

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

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