JQuery的stop()属性

    $(function(){

        $('#input1').hover(

            function(){

            $('.div1').stop()

                      .animate({left:"+=50px"},)

                      .animate({top:"+=40px"},);

            }

            ,function(){

            $('.div1').stop()

                      .animate({width:"+=50px"},)

                      .animate({height:"+=40px"},)

            }

        )

    })

CSS 部分

.div1{

        width:300px;

        height:300px;

        border:1px solid #ccc;

        background: #;

        position:absolute;

        left:%;

        top:%;

        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()属性

最新文章

热门文章