Detaillierte Erläuterung der Anwendungsbeispiele von stop() in jquery-js-Tutorial-php.cn

Detaillierte Erläuterung der Anwendungsbeispiele von stop() in jquery

巴扎黑

Freigeben： 2017-06-30 11:34:30

Original

1963 Leute haben es durchsucht

stop ist die Methode, die in jQuery verwendet wird, um Seitenanimationseffekte zu steuern. Beenden Sie sofort nach dem Ausführen den Animationseffekt auf der aktuellen Seite.
stop fügt in der neuen Version von jQuery zwei Parameter hinzu:
Der erste Parameter gibt an, ob die Animationssequenz gelöscht werden soll, d. h. ob der Animationseffekt des aktuellen Elements oder alle damit verbundenen Animationseffekte gestoppt werden sollen , normalerweise falsch, überspringe den aktuellen Animationseffekt und führe den nächsten Animationseffekt aus.
Der zweite Parameter gibt an, ob der aktuelle Animationseffekt bis zum Ende ausgeführt werden soll. Dies bedeutet, dass der Animationseffekt beim Stoppen der aktuellen Animation gerade ausgeführt wurde Normalerweise möchten Sie zu diesem Zeitpunkt den Effekt, nachdem die Animation ausgeführt wurde. Dann ist dieser Parameter wahr. Andernfalls stoppt der Animationseffekt, wenn Stopp ausgeführt wird

HTML-Code

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

Nach dem Login kopieren

CSS-Code

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

Nach dem Login kopieren

JQuery-Code

//            为了看效果，随意写的动画
                $(&#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);
                });

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsbeispiele von stop() in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!