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>
你期待的结果是什么？实际看到的错误信息又是什么？
我期待只执行一次动画事件，再次滑动不执行这个动画了。
繁星淼淼2回答
-
慕妹3146593
$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事件呢？
随时随地看视频慕课网APP
相关分类
JavaScript