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的回调才改变,然鹅这是异步的。
添加回答
举报
0/150
提交
取消