gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 08:50:26 25 4
gpt4 key购买 nike

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

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

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

最佳答案

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

关于javascript - 图标行上的 jQuery 波浪动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18388784/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com