2

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

我有一个下拉社交雪人：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)
    } 
);

我确定这就是我以前的做法！非常感谢任何帮助！

4

3 回答 3

3

尝试在动画之前放置.stop()方法：

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

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

编辑 - - -

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

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

于 2012-11-26T12:46:17.597 回答
1

您需要设置一个布尔变量，让我们调用它animating，以false.

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

否则，什么也不做。

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

于 2012-11-26T13:02:13.973 回答
0

使用.stop()：

$(this).stop().delay(300).animate({top:"+=203"}, 1000)
于 2012-11-26T12:45:04.630 回答