鍍金池/ 問答/HTML/ mouseover事件配合animate為什么重復(fù)執(zhí)行了兩次？

mouseover事件配合animate為什么重復(fù)執(zhí)行了兩次？

mouseover事件配合animate為什么重復(fù)執(zhí)行了兩次？

我希望當(dāng)我滑動(dòng)的時(shí)候執(zhí)行一次動(dòng)畫，為此我加入了一個(gè)布爾類型的開關(guān)來判定，但是奇怪的是，這個(gè)程序在我快速滑動(dòng)的時(shí)候，重復(fù)執(zhí)行了兩次？

<!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>

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

我期待只執(zhí)行一次動(dòng)畫事件，再次滑動(dòng)不執(zhí)行這個(gè)動(dòng)畫了。

回答
編輯回答
蔚藍(lán)色

console.log(1) 輸出了一次還是兩次？
試一下mouseenter事件呢？

2018年3月23日 20:01
編輯回答
我以為
$contenttop.on('mouseover', function() {
               
                if(falg == false) {
                    return;
                }
                console.log('only one');
                falg = false;
                $(".footer").animate({
                    top: '-=20px',
                }, 1000, function() {
                   
                });
            })

因?yàn)槟鉬lag要等animate的回調(diào)才改變，然鵝這是異步的。

2017年3月19日 00:56