jquery 中stop()方法总结

怼烎@ 2022-06-09 23:16 120阅读 0赞

> 我们在做效果的时候有时遇到需要停止匹配元素正在进行的动画，比如，当鼠标移入元素时显示菜单，鼠标离开时隐藏下拉菜单，如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况，也就是说鼠标移出后，动画还在进行，此时stop()就派上用场了。

你可以复制下面代码到你的编辑器中查看效果。

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style> *{ margin:0;padding:0;} ul,li{ list-style: none;display: block;} ul{ margin:100px auto;width:100px;border:1px solid #ccc;} ul li{ height: 30px;overflow: hidden;background: pink;} ul li a{ display:block ;text-align: center;text-decoration: none;line-height: 30px;height:30px;width:100%;} .subli p{ height: 30px;line-height: 30px;background: palegreen;text-align: center;margin-bottom: 2px;} </style>
        <script src="../js/jquery-1.11.3.js"></script>
    </head>
    <body>
        
       <ul>
        <li>
            <a href="#">产品介绍</a>
            <div class="subli">
                <p>111111</p>
                <p>222222</p>
                <p>333333</p>
            </div>
        </li>
       </ul>
       
        <script> $(function(){ $("li").hover( function(){ $(this).animate({ height:"121px" },500) }, function(){ $(this).animate({ height:"30px" },500) } ) }) </script>
    </body>
    </html>

> 执行以上操作你会发现当你鼠标移入移出多次，当移出鼠标时，动画还在执行。  
> 此时你再加上stop（）方法看一下效果

> 此时，在鼠标移入时，触发鼠标移入动画（在0.2秒内.开始下滑），在动画还没执行完的时候光标移出，则停止当前动画（可能还没有下滑至所有p都显示出来），执行鼠标移出触发的动画（在0.3秒内上滑变为初始画面）。反之亦然。
> 
> 然而 当碰上组合动画执行时，这时不带参数的stop()方法就要傻眼了

$(function(){ 
                $("li").hover(
                    function(){ 
                        $(this).stop().animate({
                            height:"121px"
                        },500).animate({
                            opacity:1
                        },500)
                    },
                    function(){ 
                        $(this).stop().animate({
                            height:"30px"
                        },500).animate({
                            opacity:0.3
                        },500)
                    }
                )
            })

> 因为stop()方法只会停止正在进行的动画，如果动画正执行在第1阶段（滑动阶段），则触发光标移出事件后，只会停止当前的动画，并继续进行下面的animate动画，而光标移出事件中的动画要等这个动画结束后才会继续执行，这显然不是预期的结果。这种情况下stop()方法的第一个参数就发挥作用了。
> 
> stop(true)，此时程序会把当前元素接下来尚未执行完的动画队列清空。

$(function(){ 
                $("li").hover(
                    function(){ 
                        $(this).stop(true).animate({
                            height:"121px"
                        },500).animate({
                            opacity:1
                        },500)
                    },
                    function(){ 
                        $(this).stop(true).animate({
                            height:"30px"
                        },500).animate({
                            opacity:0.3
                        },500)
                    }
                )
            })

> stop(true,true)，即停止当前动画并直接到达当前动画的末状态，并清空动画队列。  
> 注意，jQuery只能设置正在执行的动画的最终**状态**，而没有提供直接到达执行动画队列最终状态的**方法**。例如有一组动画：

$("div")
    .animate({ width: "300"}, 200)
    .animate({ height: "150"}, 300)
    .animate({ opacity: "0.2"}, 200);

> 无论怎么设置stop()方法，均无法再改变”width”或者”height”时，将此
> 
> 元素的末状态变成300\*150大小，并且设置透明度为0.2。