JQuery的stop()属性

浏览数：20 / 时间：2015年06月09日

    $(function(){
        $(‘#input1‘).hover(
            function(){
            $(‘.div1‘).stop()
                      .animate({left:"+=50px"},1000)
                      .animate({top:"+=40px"},2000);
            }
            ,function(){
            $(‘.div1‘).stop()
                      .animate({width:"+=50px"},2000)
                      .animate({height:"+=40px"},1000)
            }
        )
    })

CSS 部分

.div1{
        width:300px;
        height:300px;
        border:1px solid #ccc;
        background: #666;
        position:absolute;
        left:30%;
        top:30%;
        margin-left:-150px;
        margin-top:-150px;
    }

html部分

<div class="div1"></div>
<br/>
<input type="button" id="input1" value="开始动画" />

测试结果：

1.执行left时，移除鼠标，发生第二个stop()，阻止left，执行top、width和height；
2.执行top时，移除鼠标，发生第二个stop()，阻止top，执行width 和 height；
3.执行left时，移除鼠标，当未执行完top时，移入，发生第一个stop()，阻止top，按照顺序执行width和height，以及新的left和top；
4.执行top时，移除鼠标，当未执行完width时，移入，发生第一个stop()，阻止width，按顺序执行height，以及新的left和top；

结论：

stop() 只能阻止上一个动画

stop()参数测试

默认的stop(),即为stop( false , false )

在JQuery 代码中相应位置填入，则

====> stop(true,false) 阻止一个队列中（function(){ ... }）的动画
====> stop(false,true) 仅组织一个动画（类似与stop()），跳到上一个动画结束状态
====> stop(true,true) 阻止一个队列中的动画，并跳到队列末尾动画状态

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JQuery的stop()属性