jQuery 彩色动画

Question

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

我正在使用最新的 jQuery Color用于启用彩色动画的插件。现在，以下代码中应该发生的是（当然，当它起作用时）：（

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 要查看实例，请访问 演示页面 并将鼠标悬停在任何链接上...

===== 更新：以及需要更多帮助 ===== 坎布拉卡下面的代码运行得很好。除了在 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);
});