Die Verwendung von stop() in jquery

Zweck: Um die Verwendung von stop() zu verstehen, nehmen wir ein Beispiel und betrachten es auf intuitive Weise.

Echtes Objekt: A p mit id="animater" enthält einen Text. (Im Folgenden wird ein Animator verwendet, um das tatsächliche Objekt darzustellen)

Der endgültige Gesamteffekt der Animation: animater bewegt sich um 800 Pixel nach rechts (dieser vollständige Vorgang ist Animation 1), dann wird die Schrift allmählich größer (dieser vollständige Vorgang ist Animation 2), dann nimmt die Transparenz allmählich auf 0 ab (dieser vollständige Vorgang ist Animation 3), und dann kehrt die Transparenz allmählich auf 1 zurück (dieser vollständige Vorgang ist Animation 4), und dann wird die Schriftgröße 16 Pixel und bewegt sich auf eine Position 200 Pixel vom linken Rand entfernt (dieser vollständige Vorgang ist Animation 5).

Vorgang: Klicken Sie auf die Schaltfläche mit der anderen ID, um den Effekt anzuzeigen.

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>

CSS-Code:

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

JQuery-Code:

              //            为了看效果，随意写的动画
                $('#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 hat diese Beschreibung: stop(

stopAll

,goToEnd)

Parameter

Beschreibung

stopAll

参数	描述
stopAll	可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd	可选。规定是否允许完成当前的动画。 该参数只能在设置了 stopAll 参数时使用。

Optional. Gibt an, ob alle in der Warteschlange befindlichen Animationen des ausgewählten Elements gestoppt werden sollen.

goToEnd

Optional. Gibt an, ob die aktuelle Animation abgeschlossen werden darf. Dieser Parameter kann nur verwendet werden, wenn der stopAll-Parameter festgelegt ist.

Mein Verständnis:

Wenn stopAll false ist, wird die Animation aller in der Warteschlange befindlichen Elemente des ausgewählten Elements nicht gestoppt. Stoppt nur die aktuelle Animation. Wenn stopAll wahr ist, werden alle zur Warteschlange hinzugefügten Animationen gestoppt (wenn goToend wahr ist, springen Sie direkt zum endgültigen Effekt der aktuellen Animation).

Wenn goToend false ist, ist es nicht erlaubt, direkt zum endgültigen Effekt der aktuellen Animation zu springen ( sollte sein). der sogenannte Abschluss der aktuellen Animation (Animationsleiste ), wenn goToend wahr ist, ist es erlaubt, direkt zum endgültigen Endeffekt des Abschlusses der aktuellen Animation zu springen

Klicken Sie jedes Mal, wenn Sie die Seite ausführen und sich der Animator bewegt, auf verschiedene Schaltflächen und sehen Sie die folgenden unterschiedlichen Effekte (klicken Sie, wenn sich der Animator in Animation 1 befindet):

Klicken Sie auf die Schaltfläche button1 (stop()), da die beiden Parameter alle falsch sind. Wenn also der Klick erfolgt, springt der Animator nicht zum endgültigen Effekt der aktuellen Animation (Animation 1), sondern ruft direkt Animation 2 und dann die Animationen 3, 4 und 5 auf, bis die gesamte Animation abgeschlossen ist.

Klicken Sie auf die Schaltfläche button1 (stop(true)). Da die erste wahr und die zweite falsch ist, stoppt der Animator sofort und die Animation stoppt.

Klicken Sie auf die Schaltfläche button1 (stop(false,true)). Da der erste Wert falsch und der zweite wahr ist, wird die aktuelle Animation (Animation 1), in der sich der Animator befindet, gestoppt und Der Animator springt direkt zur endgültigen Endeffektposition der aktuellen Animation (Animation 1) und führt dann die folgenden Animationen (Animation 2, 3, 4, 5) normal aus, bis die gesamte Animation abgeschlossen ist.

Klicken Sie auf die Schaltfläche button1 (stop(true, true)). Da beide wahr sind, springt der Animator beim Klicken zur endgültigen Endeffektposition der aktuellen Animation (Animation 1) und dann zu allen Animationen stoppen .

Tatsächlich bei der Arbeit aufgetretene Fälle:

Ein Dropdown-Menü, das ich im Projekt erstellt habe, wenn die Maus nach oben bewegt wird Wenn das Menü angezeigt wird, wird das Menü ausgeblendet, wenn die Maus es verlässt

Wenn ich die Maus schnell und kontinuierlich in das Menü hinein und aus diesem heraus bewege (d. h. wenn die Menü-Pulldown-Animation nicht angezeigt wird). Wenn die Maus fertig ist, verlässt sie das Menü wieder. Wenn die Maus aufhört, sich zu bewegen, wird die angesammelte Animation weiter ausgeführt, bis die Animationssequenz abgeschlossen ist.

Lösung: Halt hinzufügen(true，true)，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，但是完成当前的动画（跳至当前动画的最终效果位置）

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