zoukankan      html  css  js  c++  java
  • JQuery的stop()属性

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

    CSS 部分

    .div1{
            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)  阻止一个队列中的动画,并跳到队列末尾动画状态

  • 相关阅读:
    第二冲刺阶段第十四天
    第二冲刺阶段第十三天
    第二冲刺阶段第十二天
    第二冲刺阶段第十一天
    典型用户分析
    课后作业——搜狗输入法
    spring第二冲刺阶段第十五天
    spring第二冲刺阶段第十四天
    spring第二冲刺阶段第十三天
    spring第二冲刺阶段第十二天
  • 原文地址:https://www.cnblogs.com/dongcheck/p/4132264.html
Copyright © 2011-2022 走看看