最近工作时遇到个关于动画的问题,如下:
$("div").hover(
function() {
$(this).animate({"margin-top":"100px"},1000);
}, function() {
$(this).animate({"margin-top":"200px"},1000);
});
看代码就是一个简单的鼠标滑过的动画而已,但是当我测试的时候发现,当我发神经似的来回滑动时,事件就被触发了多次,动画也就重复了多次,怎么才能不重复出现,即动画过程中,鼠标滑过这个div,不会触发该事件那?
带着疑问,google之,
发现,原来为元素绑定hover事件之后,如果光标移入移出的速度太快,导致移入的动画还没执行完,就移出光标,则移出的动画效果就会被放到队列,等移入的动画完成后在执行。因此如果光标的移入移出速度太快,就会导致动画效果与移动光标不一致,出现重复出现的情况。
而解决办法有两种:
1、你可以使用jq的stop方法: