为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

繁星淼淼 2019-03-20 22:19:18
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>你期待的结果是什么?实际看到的错误信息又是什么?我期待只执行一次动画事件,再次滑动不执行这个动画了。
查看完整描述

2 回答

?
慕妹3146593

TA贡献1820条经验 获得超9个赞

$contenttop.on('mouseover', function() {

               

                if(falg == false) {

                    return;

                }

                console.log('only one');

                falg = false;

                $(".footer").animate({

                    top: '-=20px',

                }, 1000, function() {

                   

                });

            })    

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


查看完整回答
反对 回复 2019-04-10
?
九州编程

TA贡献1785条经验 获得超4个赞

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

查看完整回答
反对 回复 2019-04-10
  • 2 回答
  • 0 关注
  • 740 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信