首页 >web前端 >js教程 >jquery 中 stop() 的用法实例详解

jquery 中 stop() 的用法实例详解

巴扎黑
巴扎黑原创
2017-06-30 11:34:301966浏览

stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。
stop在新版jQuery中添加了2个参数:
第一个参数的意思是是否清空动画序列,也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果,一般为false,跳过当前动画效果,执行下一个动画效果;
第二个参数是是否将当前动画效果执行到最后,意思就是停止当前动画的时候动画效果刚刚执行了一般,这个时候想要的是动画执行之后的效果,那么这个参数就为true。否则动画效果就会停在stop执行的时候

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>


CSS 代码

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


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

以上是jquery 中 stop() 的用法实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn