Question

当你将鼠标悬停在超链接上时，我有一个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秒的时间内说，无论鼠标悬停量多少，它都只会褪色一次。

谢谢大家！

Answer 1

您可以使用is(":animated")方法检查元素是否正在设置动画。如果元素是动画，则返回true else`false。希望有所帮助。

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() { 
            if(!$(this).is(":animated")){
               $(this).animate({ color: settings.color },settings.duration); 
            }
        });
        $(this).mouseout(function() { 
            if(!$(this).is(":animated")){ 
               $(this).animate({ color: original },settings.duration); });
            }
    });
};

Answer 2

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

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

Answer 3

不，不，不。这里的问题是你正在使用错误的事件。不要使用mouseover和mouseout！使用mouseenter和mouseleave。

请参阅此链接以了解用法：

http://api.jquery.com/mouseenter/ http://api.jquery.com/mouseleave/

超链接颜色淡入淡出鼠标注册过多

3 个答案: