我的页面上有一排图标,当用户用光标悬停在它们上面时,我想创建一个波浪动画效果。
我使用这个基本代码作为入门:
$('#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');
唯一的区别是:
.on()
的使用更透明,但也允许更多的可扩展性(如果需要,可以稍后添加更多事件,如mousemove
或其他)- 从
#icons
委派所有li
,而不是将#icons > li
作为选择器,这意味着动画绑定只应用一次,而不是多次(每个li
应用一次)-这是三个更改中最重要的一个 - 使用本机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来证明它。