L'utilisation de stop() dans jquery

Objectif : Afin de comprendre l'utilisation de stop(), prenons un exemple et regardons-le de manière intuitive.

Objet réel : Un p avec id="animater" contient un morceau de texte. (Ce qui suit utilise un animateur pour représenter l'objet réel)

L'effet final complet de l'animation : animater se déplace vers la droite de 800px (ce processus complet est l'animation 1), puis, la police devient progressivement plus grande (ce processus complet est l'animation 2), puis, la transparence diminue progressivement jusqu'à 0 (ce processus complet est l'animation 3), puis la transparence revient progressivement à 1 (ce processus complet est l'animation 4), puis la taille de la police devient 16px et se déplace vers une position à 200px de la bordure gauche (ce processus complet est l'animation 5 ).

Opération : Cliquez sur les boutons avec différents identifiants pour voir l'effet.

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

Code CSS :

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

code 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 a cette description :

stop(stopAll,goToEnd)

Paramètres

Description

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

stopAll

Facultatif. Spécifie s'il faut arrêter toutes les animations en file d'attente de l'élément sélectionné.

goToEnd

Facultatif. Spécifie si l'animation actuelle est autorisée à se terminer. Ce paramètre ne peut être utilisé que lorsque le paramètre stopAll est défini.

Ma compréhension :

Lorsque stopAll est faux, il n'arrête pas l'animation de tous les éléments en file d'attente de l'élément sélectionné, arrête uniquement l'animation en cours. Lorsque stopAll est vrai, arrêtez toutes les animations ajoutées à la file d'attente (si goToend est vrai, passez directement à l'effet final de l'animation actuelle).

Lorsque goToend est faux, il n'est pas permis de passer directement à l'effet final de l'animation en cours ( devrait être ce qu'on appelle l'achèvement de l'animation en cours Barre d'animation ), lorsque goToend est vrai, il est permis de passer directement à l'effet final final de la fin de l'animation en cours

Chaque fois que vous exécutez la page et que l'animateur bouge, cliquez sur différents boutons et voyez les différents effets suivants (cliquez lorsque l'animateur est en animation 1) :

Cliquez sur le bouton bouton1 (stop()), car les deux paramètres sont tous faux. Ainsi, lorsque le clic se produit, l'animateur ne passe pas à l'effet final de l'animation en cours (animation 1), mais entre directement dans l'animation 2, puis dans les animations 3, 4 et 5 jusqu'à ce que toute l'animation soit terminée.

Cliquez sur le bouton bouton1 (stop(true)). Puisque le premier est vrai et le second est faux, l'animateur s'arrête immédiatement et l'animation s'arrête de bouger.

Cliquez sur le bouton bouton1 (stop(false,true)). Puisque le premier est faux et le second est vrai, lorsque le clic se produit, l'animation actuelle (animation 1) où se trouve l'animateur est arrêtée et l'animateur saute directement à la position finale de l'effet final de l'animation actuelle (Animation 1), puis exécute les animations suivantes (Animation 2, 3, 4, 5) normalement jusqu'à ce que toute l'animation soit terminée.

Cliquez sur le bouton bouton1 (stop(true, true)). Puisque les deux sont vrais, lorsque le clic se produit, l'animateur passe à la position finale de l'effet final de l'animation actuelle (animation 1), puis à toutes les animations. arrêt .

Cas réels rencontrés au travail :

Un menu déroulant que j'ai réalisé dans le projet, lorsque la souris est déplacée vers le haut Le menu s'affiche lorsque la souris est laissée, et le menu est masqué lorsque la souris quitte

Si je déplace la souris dans et hors du menu rapidement et continuellement (c'est-à-dire lorsque le menu tombe -down n'est pas terminée, la souris sort à nouveau du menu) "L'accumulation d'animation" se produira lorsque la souris cessera de bouger, l'animation accumulée continuera à être exécutée jusqu'à ce que la séquence d'animation soit terminée.

Solution : Ajouter un arrêt(true，true)，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，但是完成当前的动画（跳至当前动画的最终效果位置）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!