javascript - 图标行上的 jQuery 波浪动画

Question

我的页面上有一行图标，我想在用户将光标悬停在图标上时创建波浪动画效果。

我正在为初学者使用这个基本代码:

$('#icons > li')
    .hover(function() {
        $(this).animate({
            'top': (-1 * hover_distance)
        }, hover_speed);
    }, function() {
        $(this).animate({
            'top': 0
        }, hover_speed);
    })
;

看起来不错。但是有一个问题:当你疯狂地将光标移到图标上时，每个图标的动画队列都会充满许多 Action (向上、向下、向上、向下、向上、向下等)，并且图标会上升和上升即使您停止与图标交互，也会多次按下。

我希望我的图标只完成一个循环(向上和向下)然后停止动画。我正在为此寻找最优雅(简短、简单、轻便)的解决方案。

PS:而且您不能只使用 stop()，因为它会防止“波浪效应”(即，当您在图标上快速划动光标时，它们向上移动并作为回应，就像真正的波浪一样)。

PPS:这是 JS-Fiddle: http://jsfiddle.net/nZqLy/3/

Answer 1

您可以在动画之前使用.stop() 来停止当前动画或使用.stop(true) 来取消队列中的所有动画。 http://jsfiddle.net/nZqLy/9/

$('#icons > li').hover(function() {
  $(this).stop(true).animate({
    'top': (-1 * hover_distance)
  }, hover_speed);
}, function() {
  $(this).animate({
    'top': 0
  }, hover_speed);
});