初学JQ使用一些动画效果时常常会忘记stop()的重要性_jq为啥要先用stop()在用动画-CSDN博客

本文链接：https://blog.csdn.net/weixin_39411655/article/details/113782548

初学JQ使用一些动画效果时常常会忘记stop()的重要性

如下图就是jq执行动画没有加stop(),每次移入移出系统都记住了，当你快速移入移出的时候你鼠标此时虽然是移出了，但是这个动画还没有执行完次数所以就会出现这种情况，stop()是清除之前的动画，执行最后一次动画。
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .pull_menu {
            position: relative;
            width: 300px;
            color: white;
            line-height: 60px;
            text-align: center;
            background-color: tomato;
            cursor: pointer;
            margin: 100px auto;
        }


        ul {
            width: 400px;
            position: absolute;
            background-color: skyblue;
            display: none;
        }


        ul li {
            text-decoration: none;
            list-style: none;
            line-height: 50px;
            text-align: left;
            color: black;
            padding-left: 20px;
        }
    </style>
    <script src="libs/jquery-1.12.4.min.js"></script>
</head>

<body>
    <div class="pull_menu">
        下拉菜单
        <ul>
            <li>菜单项一</li>
            <li>菜单项二</li>
            <li>菜单项三</li>
        </ul>
    </div>

    <script>
        $('.pull_menu').mouseenter(function () {
            $('ul').slideDown();
        }).mouseleave(function () {
            $('ul').slideUp();
        });
    </script>
</body>

</html>

加stop()的效果：
在这里插入图片描述

 $('.pull_menu').mouseenter(function () {
            $('ul').stop().slideDown();
        }).mouseleave(function () {
            $('ul').stop().slideUp();
        });