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

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>

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

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

繁星淼淼

浏览 741回答 2

2回答

慕妹3146593

$contenttop.on('mouseover', function() {                               if(falg == false) {                    return;                }                console.log('only one');                falg = false;                $(".footer").animate({                    top: '-=20px',                }, 1000, function() {                                   });            })    因为你flag要等animate的回调才改变，然鹅这是异步的。

0

0

九州编程

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

0

0

随时随地看视频慕课网APP

相关分类

JavaScript