码迷,mamicode.com
首页 > Web开发 > 详细

JQuery的stop()属性

时间:2014-11-30 00:24:29      阅读:1293      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   os   sp   on   div   

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

标签:style   blog   io   ar   color   os   sp   on   div   

原文地址:http://www.cnblogs.com/dongcheck/p/4132264.html

(2)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!