图标行上的 jQuery 波浪动画

Question

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

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

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

而且看起来还不错。但是有一个问题：当您将光标疯狂地移动到图标上时，每个图标的动画队列都充满了许多动作（向上、向下、向上、向下、向上、向下等），并且图标在向上和向上移动。即使您停下来与图标进行交互，也会下降很多次。

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

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);
});

Answer 2

我赞成@jimjimmy1995 的答案，但只是为了提供一种更快、更高效的替代方式来制作相同的动画：

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

唯一的区别是：

1. .on() 的使用更加透明，但也允许更多的可扩展性（您可以稍后添加更多事件，如 mousemove 或其他内容，如果您愿意）
2. 从#icons 委托所有li 而不是使#icons > li 选择器意味着动画绑定只应用一次，而不是多次（每个li 一次） - 这是最重要的三个变化
3. 使用本机 DOM 名称而不是字符串（top 与 'top'）是最佳实践。对于非连字符的单词没有区别，但是当您开始处理 marginTop 与 'margin-top' 时，情况就会有所不同。

更新

找到解决方案：

$('#icons').on({
    mouseenter:function(){
        if(!$(this).is(':animated')){
            $(this).animate({top:(-1*hover_distance)},hover_speed);
        }
    },
    mouseleave:function(){
        $(this).animate({top:0},hover_speed);
    }
},'li');

使用:animated selector 检查项目是否正在进行动画处理。 if 逻辑只会在没有的情况下执行动画。

jsFiddle to prove it.