jquery – 超链接颜色淡入淡出过多注册鼠标悬停

2023年12月11日 121次阅读

当你将鼠标悬停在超链接上时,我有一个jQuery srcipt来制作一个漂亮的颜色渐变动画.颜色渐渐变为红色并逐渐消失回原始状态.

/* 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秒的时间内,无论鼠标悬停量多少,它都只会褪色一次.

谢谢大家！

最佳答案 如果在开始动画之前执行.stop(true,true),它应该停止当前动画,清除动画队列,并转换到当前动画的结尾.这样的更改可以解决您的问题：

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