Explication détaillée des exemples d'utilisation de stop() dans jquery-js tutoriel-php.cn

Explication détaillée des exemples d'utilisation de stop() dans jquery

巴扎黑

Libérer： 2017-06-30 11:34:30

original

1963 Les gens l'ont consulté

stop est la méthode utilisée dans jQuery pour contrôler les effets d'animation de page. Immédiatement après l'exécution, terminez l'effet d'animation sur la page actuelle.
stop ajoute 2 paramètres dans la nouvelle version de jQuery :
Le premier paramètre signifie s'il faut effacer la séquence d'animation, c'est-à-dire s'il faut arrêter l'effet d'animation de l'élément actuel ou arrêter tous les effets d'animation qui y sont attachés , généralement faux, ignore l'effet d'animation actuel et exécute l'effet d'animation suivant ;
Le deuxième paramètre indique s'il faut exécuter l'effet d'animation actuel jusqu'à la fin, ce qui signifie qu'à l'arrêt de l'animation en cours, l'effet d'animation vient d'être exécuté. . Normalement, ce que vous voulez à ce moment-là C'est l'effet après l'exécution de l'animation, alors ce paramètre est vrai. Sinon, l'effet d'animation s'arrêtera lorsque l'arrêt sera exécuté

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>

Copier après la connexion

Code CSS

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

Copier après la connexion

code 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);
                });

Copier après la connexion

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!