Detailed explanation of usage examples of stop() in jquery-JS Tutorial-php.cn

Detailed explanation of usage examples of stop() in jquery

巴扎黑

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

Original

1974 people have browsed it

stop is the method used in jQuery to control page animation effects. Immediately after running, end the animation effect on the current page.
stop has added two parameters in the new version of jQuery:
The first parameter means whether to clear the animation sequence, that is, whether to stop the animation effect of the current element or to stop all animation effects attached to it, usually false, skip the current animation effect and execute the next animation effect;
The second parameter is whether to execute the current animation effect to the end, which means that when stopping the current animation, the animation effect has just been executed. Normally, what you want at this time It is the effect after the animation is executed, then this parameter is true. Otherwise the animation effect will stop when stop is executed

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>

Copy after login

CSS code

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

Copy after login

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

Copy after login

The above is the detailed content of Detailed explanation of usage examples of stop() in jquery. For more information, please follow other related articles on the PHP Chinese website!