jQuery 颜色动画

Question

我被一个不想动画的函数困住了......

我正在使用最新的jQuery Color Plugin 来启用彩色动画。现在，在下面的代码中应该发生的是（当然，当它工作时）：

(1) 用户选择一种颜色， (2) 基于该颜色的 RGB 值，我们创建该颜色的较浅色调， (3) 当悬停在一个链接上时，它的颜色被新计算的颜色替换， (4) 移开链接时，应将原色动画化。

颜色替换效果很好，但动画不像现在看起来更像是传统的 CSS 悬停效果，而不是使用 jQuery 完成的超过 800 毫秒的效果。

如果那里的忍者可以帮助我，我非常愿意让你的投掷明星闪耀一周:)。代码如下：

$('a').hover(function() {
//code when hover over
$oldColour = $(this).css('color');

    $(this).animate({'color': $(this).css('color', function(i, v){
      var rgb = getRGB($(this).css('color'));

      for(var i = 0; i < rgb.length; i++){
        rgb[i] = (rgb[i] + 60 < 255) ? rgb[i] + 60 : 255;
      }

      var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
      return  newColor;

      }) //end anonymous function
    }, 800); //end animate


    }, function() {
      //code when hovering away
      $(this).animate({'color': $(this).css('color', $oldColour)}, 800);
    });

您的帮助一如既往地棒极了，非常感谢！ 谢谢你（当然还有女孩们）看看:)

PS 要查看实时示例，请转到 demo page 并将鼠标悬停在任何链接上...

===== 更新：需要更多帮助 ===== Cambraca 下面的代码完美运行。除了在 IE 中它首先褪色为非常暗的颜色，然后当我关闭鼠标时返回到初始颜色，然后当我再次将鼠标悬停在它上面时，会显示正确的重新计算颜色...

关于如何为 IE 解决这个问题的任何想法？

Answer 1

试试这个

var $oldColour;

$('a').hover(function() {
    //code when hover over
    $oldColour = $(this).css('color');
    var rgb = getRGB($(this).css('color'));
    for (var i = 0; i < rgb.length; i++)
        rgb[i] = Math.min(rgb[i] + 60, 255);
    var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
    $(this).animate({'color': newColor}, 800);
}, function() {
    //code when hovering away
    $(this).animate({'color': $oldColour}, 800);
});