首頁 >web前端 >js教程 >jquery之stop()的用

jquery之stop()的用

巴扎黑
巴扎黑原創
2017-06-30 11:30:161599瀏覽

目的:為了 了解stop()的用法,舉個例子,直覺的方式看看。

實體:一個id="animater"的p包含了一段文字。 (以下用animator表示實物)

#動畫最終的完整效果: animater向右移動800px(這個完整的過程是動畫1),然後,字體逐漸變大(這個完整的過程是動畫2),然後,透明度逐漸降低到0(這個完整的過程是動畫3),然後透明度逐漸恢復到1 (這個完整的過程是動畫4),然後字體大小變成16px同時移動到距離左邊界200px的位置(這個完整的過程是動畫5).

操作:點擊不同id的button,觀看效果

HTML程式碼:

 


       <p id="animater">
            stop()方法测试        </p>
        <p 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)"/>
            
        </p>

 

CSS程式碼:

 


         #animater{
                width: 150px;
                background:activeborder;
                border: 1px solid black;                /*为了移动,需设置此属性*/
                position: relative;
            }

 

jquery程式碼:


              //            为了看效果,随意写的动画
                $('#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');        
                //           点击不同的button执行不同的操作        
                $('#button1').click(function(){                    //默认参数是false,不管写一个false还是两个false还是没写false效果一样
                    $('#animater').stop();
                });
                $('#button2').click(function(){                    //第二个参数默认false
                    $('#animater').stop(true);
                });
                $('#button3').click(function(){
                    $('#animater').stop(false,true);
                });
                $('#button4').click(function(){
                    $('#animater').stop(true,true);
                });

 

##W3School上是這樣的說明的:

stop(

stopAll,goToEnd)

##參數#可選。規定是否停止被選元素的所有加入隊列的動畫。

我的理解:

stopAll 為false時,不停止被選元素所有加入隊列的動畫,僅停止當前的動畫。當stopAll為true時,停止所有加入佇列的動畫(如goToend為true,直接跳到目前動畫的最終效果)。

goToend為false時,不允許直接跳到目前動畫的最終效果(應該是所謂的完成當前的動畫吧),當goToend為true時,允許直接跳到完成目前動畫的最終結尾效果

 

每次運行頁面,animater運動時,點擊不同button,看到如下不同的效果(animater處在動畫1時點擊):

點擊按鈕button1(stop()),由於兩個參數都是false。所以點擊發生時,animater沒有跳到當前動畫(動畫1)的最終效果,而直接進入動畫2,然後動畫3,4,5.直至完成整個動畫。

點擊按鈕button1(stop(true)),由於第一個是true,第二個是false,所以animater立刻全部停止了,動畫不動了。

點擊按鈕button1(stop(false,true)),由於第一個是false,第二個是true,所以點擊發生時,animater身處的當前動畫(動畫1)停止並且animater直接跳到目前動畫(動畫1)的最終結尾效果位置,接著正常執行下面的動畫(動畫2,3,4,5),直到完成整個動畫。

點擊按鈕button1(stop(true,true)),由於兩個都是true,所以點擊發生時,animater跳到當前動畫(動畫1)的最終末尾效果位置,然後,全部動畫停止。

工作中遇到過的實際案例:

我在專案裡做的一個下拉選單,當滑鼠移上去的時候就選單顯示,當滑鼠離開的時候選單隱藏

如果我快速不斷地將滑鼠移入移出選單(即,當選單下拉動畫未完成時,滑鼠又移出了選單)就會產生「動畫累積",當滑鼠停止移動後,累積的動畫還會持續執行,直到動畫序列執行完畢。

解決方法:在寫動畫效果的程式碼前加入stop(true#true),這樣每次快速的移入移出選單,就正常了,當移入一個選單的時候,停止所有加入隊列的動畫,但是完成當前的動畫(跳至當前動畫的最終效果位置) 

描述
stopAll
goToEnd #可選。規定是否允許完成目前的動畫。

此參數只能在設定了 stopAll 參數時使用。

以上是jquery之stop()的用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn