jquery - 超链接颜色褪色记录了过多的鼠标悬停

Question

我有一个 jQuery 脚本，可以在鼠标悬停在超链接上时制作漂亮的颜色淡入动画。颜色逐渐变为红色，然后又恢复到原来的状态。

/* Hyperlink colour fade animation */
jQuery.fn.dwFadingLinks = function(settings) {
    settings = jQuery.extend({
        color: '#67C',
        duration: 250
    }, settings);
    return this.each(function() {
        var original = $(this).css('color');
        $(this).mouseover(function() { $(this).animate({ color: settings.color },settings.duration); });
        $(this).mouseout(function() { $(this).animate({ color: original },settings.duration); });
    });
};

我遇到的问题是，每次鼠标悬停都会被记录，并且每次迭代都会运行效果。因此，如果您将鼠标悬停在链接上 20 次，链接就会动画播放 20 次，这看起来真的很傻。

有没有办法限制给定时间内的动画数量。假设在 3 - 5 秒的时间内，无论鼠标悬停多少次，它都只会消失一次。

谢谢大家!

Answer 1

如果在开始动画之前执行.stop(true, true)，它应该停止当前动画，清除动画队列，并过渡到当前动画的结尾。像这样的更改应该可以解决您的问题:

$(this).stop(true, true).animate({ color: settings.color },settings.duration);