JQuery的stop()属性

    $(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)  阻止一个队列中的动画，并跳到队列末尾动画状态