使用 jQuery 使鼠标悬停时链接的颜色褪色

发布于 2024-09-29 08:37:05 字数 357 浏览 9 评论 0原文

当您将鼠标悬停在 jQuery 中的链接上时，我试图实现漂亮的淡入淡出颜色效果。

到目前为止我已经：

$('a').hover(
function () { 
    $(this).animate({ color: '#fff' }, 1000 );
},
function () { 
    $(this).animate({ color: '#000' }, 1000 );
});

这实际上工作得很好。然而，想象一下如果链接是导航，彼此靠近。如果您尝试将鼠标悬停在一个链接、其旁边的链接并返回数次。链接会在心理上淡入淡出，如果已经有动画发生，我该如何停止“排队”事件？

任何建议表示赞赏！

原文

Im trying to achieve a nice fade to color effect when you mouse over links in jQuery.

So far I have:

$('a').hover(
function () { 
    $(this).animate({ color: '#fff' }, 1000 );
},
function () { 
    $(this).animate({ color: '#000' }, 1000 );
});

Which actually does work fine. However, imagine if the links are navigation, being close to each other. If you tried hovering from one link, to the one next to it and back several times.
The links go mental fading in and out, how would I stop an event being "queued" if there is a animation already happening?

Any advice appreciated!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

第几種人 2024-10-06 08:37:05

您正在寻找 stop 函数

$('a').hover(
    function () { 
        $(this).stop().animate({ color: '#fff' }, 1000 );
    },
    function () { 
        $(this).stop().animate({ color: '#000' }, 1000 );
    }
);

You're looking for the stop function

$('a').hover(
    function () { 
        $(this).stop().animate({ color: '#fff' }, 1000 );
    },
    function () { 
        $(this).stop().animate({ color: '#000' }, 1000 );
    }
);

回复收藏 0 原文

~没有更多了~