1

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

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

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

4

2 回答 2

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);
});
于 2013-08-22T19:03:15.977 回答
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. 委托所有lifrom#icons而不是制作#icons > li选择器意味着动画绑定只应用一次，而不是多次（每次一次li） - 这是三个更改中最重要的
  3. 使用本机 DOM 名称而不是字符串 ( topvs 'top') 是最佳实践。对于非连字符的单词没有区别，但是当您开始处理marginTopvs时'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 来证明它。

于 2013-08-22T19:11:01.147 回答