Question

生气。我有这个工作，然后愚蠢地覆盖我的代码没有备份，现在不记得我是怎么做到的！

我有一个社交雪人：http://projects.jonhudsonweb.com/work

但是如果你反复在它上面运行鼠标，它会一次又一次地重复动画。这是我努力阻止这一点：

$('#social-yeti').not(':animated').hoverIntent(function(){
    $(this).delay(300).animate({top:"+=203"}, 1000)
    }, function(){
    $(this).delay(300).animate({top:"-=203"}, 1000)
    } 
);

我确信这是我之前做过的事情！任何帮助非常感谢！

Answer 1

尝试在动画制作之前放置 .stop（）方法：

$('#social-yeti').hover(function() {
    $(this).stop(true, true).animate({ top:"0" }, 1000);
}, function() {
    $(this).stop(true, true).animate({ top:"-203" }, 1000);
});

这将在开始新动画之前基本清除元素的动画队列。

编辑-----

之前的问题是您在动画中间的顶部当前值中添加了一个值（ + = 203 ）。我改为为特定的“顶部”值设置动画，而不是添加/减去值以避免奇怪的跳跃。立即尝试使用该代码。

第一个 .stop 参数指示是否清除队列，第二个表示它应跳转到当前动画的末尾。如果需要，请随意更改。

Answer 2

你需要设置一个布尔变量，让我们称之为animating，从false.开始

当鼠标悬停时，在开始动画之前，检查animating是否为假，如果是动画开始，则将其值更改为true。

否则，什么都不做。

动画完成后，（使用回调函数）将animating值设置回false。

Answer 3

使用.stop()：

$(this).stop().delay(300).animate({top:"+=203"}, 1000)

如果已经动画，请不要制作动画

3 个答案: