首页 > 代码库 > JQuery的stop()属性

JQuery的stop()属性

2024-08-05 06:04:15   222人阅读

    $(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=http://www.mamicode.com/"开始动画" />

测试结果：

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


联系
我们