jquery 中 stop() 的用法實例詳解-js教程-PHP中文網

jquery 中 stop() 的用法實例詳解

巴扎黑

發布： 2017-06-30 11:34:30

原創

1965 人瀏覽過

stop 是jQuery中用來控制頁面動畫效果的方法。運行後立刻結束目前頁面上的動畫效果。
stop在新版jQuery中加入了2個參數：
第一個參數的意思是是否清空動畫序列，也就是stop的是當前元素的動畫效果還是停止後面附帶的所有動畫效果，一般為false，跳過當前動畫效果，執行下一個動畫效果；
第二個參數是是否將當前動畫效果執行到最後，意思就是停止當前動畫的時候動畫效果剛剛執行了一般，這個時候想要的是動畫執行之後的效果，那麼這個參數就為true。否則動畫效果就會停在stop執行的時候

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 程式碼

//            为了看效果，随意写的动画
                $(&#39;#animater&#39;).animate({
                    &#39;right&#39;:-800
                }, 3000).animate({&#39;font-size&#39;:&#39;16px&#39;},&#39;normal&#39;).animate({&#39;font-size&#39;:&#39;26px&#39;},&#39;normal&#39;).animate({&#39;font-size&#39;:&#39;36px&#39;},&#39;normal&#39;).animate({&#39;font-size&#39;:&#39;46px&#39;},&#39;normal&#39;).animate({&#39;font-size&#39;:&#39;56px&#39;},&#39;normal&#39;).animate({&#39;opacity&#39;:0},&#39;normal&#39;).animate({&#39;opacity&#39;:1},&#39;normal&#39;).animate({&#39;left&#39;:200,&#39;font-size&#39;:&#39;16px&#39;},&#39;normal&#39;);



        
                //           点击不同的button执行不同的操作
        
                $(&#39;#button1&#39;).click(function(){
                    //默认参数是false，不管写一个false还是两个false还是没写false效果一样
                    $(&#39;#animater&#39;).stop();
                });
                $(&#39;#button2&#39;).click(function(){
                    //第二个参数默认false
                    $(&#39;#animater&#39;).stop(true);
                });
                $(&#39;#button3&#39;).click(function(){
                    $(&#39;#animater&#39;).stop(false,true);
                });
                $(&#39;#button4&#39;).click(function(){
                    $(&#39;#animater&#39;).stop(true,true);
                });

登入後複製

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