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

Home

Web Front-end

JS Tutorial

Detailed explanation of usage examples of stop() in jquery

Jun 30, 2017 am 11:34 AM

jquery stop usage

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

&lt;p id=&quot;animater&quot;&gt;
            stop()方法测试
        &lt;/p&gt;

        &lt;p id=&quot;button&quot;&gt;
            &lt;input type=&quot;button&quot; id=&quot;button1&quot; value=&quot;stop()&quot;/&gt;
            &lt;input type=&quot;button&quot; id=&quot;button2&quot; value=&quot;stop(true)&quot;/&gt;
            &lt;input type=&quot;button&quot; id=&quot;button3&quot; value=&quot;stop(false,true)&quot;/&gt;
            &lt;input type=&quot;button&quot; id=&quot;button4&quot; value=&quot;stop(true,true)&quot;/&gt;
            
        &lt;/p&gt;

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn