mouseover事件配合animate为什么重复执行了两次?

mouseover事件配合animate为什么重复执行了两次?

我希望当我滑动的时候执行一次动画,为此我加入了一个布尔类型的开关来判定,但是奇怪的是,这个程序在我快速滑动的时候,重复执行了两次?

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #wrap {
                width: 300px;
                height: 600px;
                cursor: pointer;
                margin: 0 auto;
                overflow: hidden;
            }
            
            #wrap .contenttop {
                width: 200px;
                height: 300px;
                border: 1px solid green;
            }
            
            #wrap .footer {
                width: 200px;
                height: 77px;
                border: 1px solid blue;
                position: relative;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>

    <body>

        <div id="wrap">
            <div class="contenttop"></div>
            <div class="footer"></div>
        </div>
        <script type="text/javascript">
            var $owarp = $('#wrap');
            var $contenttop = $owarp.find('.contenttop');
            var a = 0;
            var falg = true;
            $contenttop.on('mouseover', function() {
                console.log(1);
                if(falg == false) {
                    return;
                }
                $(".footer").animate({
                    top: '-=20px',
                }, 1000, function() {
                    falg = false;
                });
            })    
        </script>
    </body>

</html>

你期待的结果是什么?实际看到的错误信息又是什么?

我期待只执行一次动画事件,再次滑动不执行这个动画了。

阅读 1.8k
2 个回答
$contenttop.on('mouseover', function() {
               
                if(falg == false) {
                    return;
                }
                console.log('only one');
                falg = false;
                $(".footer").animate({
                    top: '-=20px',
                }, 1000, function() {
                   
                });
            })    

因为你flag要等animate的回调才改变,然鹅这是异步的。

console.log(1) 输出了一次还是两次?
试一下mouseenter事件呢?

推荐问题