jQuery图标行上的波浪动画

jQuery wave animation on row of icons

本文关键字：动画 图标 jQuery      更新时间：2023-09-26

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

我使用这个基本代码作为入门：

$('#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/

您可以在动画之前使用.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);
});

我对@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选择器检查项目是否正在设置动画。if逻辑将仅在不执行动画的情况下执行动画。

jsFiddle来证明它。

相关文章：