jquery .stop()的用法

Posted 2020-09-22 tanxiang6690

jquery的.stop()的用法：

　　目的：为了 了解stop()的用法，举个例子，直观的方式看看。

　　实物：一个id="animater"的div包含了一段文字。(以下用animator表示实物)

　　动画最终的完整效果： animater向右移动800px（这个完整的过程是动画1），然后，字体逐渐变大（这个完整的过程是动画2），然后，透明度逐渐降低到0（这个完整的过程是动画3），然后透明度逐渐恢复到1（这个完整的过程是动画4），然后字体大小变为　　16px同时移动到距离左边界200px的位置（这个完整的过程是动画5）.

　　操作：点击不同id的button，观看效果。

　　HTML：

        <div id="animater">
            stop()方法测试
        </div>

        <div id="button">
            <input type="button" id="button1" value="stop()"/>
            <input type="button" id="button2" value="stop(true)"/>
            <input type="button" id="button3" value="stop(false,true)"/>
            <input type="button" id="button4" value="stop(true,true)"/>
            
        </div>

　　CSS：

#animater{
    width: 150px;
    background:activeborder;
    border: 1px solid black;
    /*为了移动，需设置此属性*/
    position: relative;
}

　　jQuery：

// 为了看效果，随意写的动画
$(\'#animater\').animate({
    \'right\': -800
}, 3000).animate({
    \'font-size\': \'16px\'
}, \'normal\').animate({
    \'font-size\': \'26px\'
}, \'normal\').animate({
    \'font-size\': \'36px\'
}, \'normal\').animate({
    \'font-size\': \'46px\'
}, \'normal\').animate({
    \'font-size\': \'56px\'
}, \'normal\').animate({
    \'opacity\': 0
}, \'normal\').animate({
    \'opacity\': 1
}, \'normal\').animate({
    \'left\': 200,
    \'font-size\': \'16px\'
}, \'normal\');

// 点击不同的button执行不同的操作
$(\'#button1\').click(function() {
    // 默认参数是false，不管写一个false还是两个false还是没写false效果一样
    $(\'#animater\').stop();
});
$(\'#button2\').click(function() {
    // 第二个参数默认false
    $(\'#animater\').stop(true);
});
$(\'#button3\').click(function() {
    // 
    $(\'#animater\').stop(false, true);
});
$(\'#button4\').click(function() {
    $(\'#animater\').stop(true, true);
});

 

　　W3School上是这样的说明的：stop(stopAll,goToEnd)

　　

 

 

　　我的理解：

　　1、stopAll 为false时，不停止被选元素所有加入队列的动画,仅停止当前的动画。stopAll为true时，停止所有加入队列的动画（如goToend为true，直接跳到当前动画的最终效果）。

　　2、goToend为false时，不允许直接跳到当前动画的最终效果(应该就是所谓的完成当前的动画吧)，goToend为true时，允许直接跳到完成当前动画的最终末尾效果。

　　3、stop(true)等价于stop(true,false): 停止被选元素的所有加入队列的动画。

　　4、stop(true,true):停止被选元素的所有加入队列的动画，但允许完成当前动画。

　　5、stop()等价于stop(false,false):停止被选元素当前的动画，但允许完成以后队列的所有动画。

　　6、stop(false,true):立即结束当前的动画到最终效果，然后完成以后队列的所有动画。

 

　　每次运行页面,animater运动时，点击不同button,看到如下不同的效果（animater处在动画1时点击）：

　　点击按钮button1（stop()），由于两个参数都是false。所以点击发生时，animater没有跳到当前动画（动画1）的最终效果，而直接进入动画2，然后动画3，4，5.直至完成整个动画。

　　点击按钮button1（stop(true)），由于第一个是true，第二个是false，所以animater立刻全部停止了，动画不动了。

　　点击按钮button1（stop(false,true)），由于第一个是false，第二个是true，所以点击发生时，animater身处的当前动画（动画1）停止并且animater直接跳到当前动画（动画1）的最终末尾效果位置，接着正常执行下面的动画（动画2，3，4，5），直至完成整个动画。

　　点击按钮button1（stop(true，true)），由于两个都是true，所以点击发生时，animater跳到当前动画（动画1）的最终末尾效果位置，然后，全部动画停止。

 

　　工作中遇到过的实际案例：

　　我在项目里做的一个下拉菜单，当鼠标移上去的时候就菜单显示，当鼠标离开的时候菜单隐藏

　　如果我快速不断地将鼠标移入移出菜单（即，当菜单下拉动画未完成时，鼠标又移出了菜单）就会产生“动画积累"，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行完毕。

 

　　解决方法：

　　在写动画效果的代码前加入stop(true，true)，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，但是完成当前的动画（跳至当前动画的最终效果位置）。