2

我被一个不想动画的功能困住了......

我正在使用最新的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 要查看实时示例，请转到演示页面并将鼠标悬停在任何链接上...

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

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

4

1 回答 1

2

尝试这个

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);
});
于 2010-11-23T02:52:30.967 回答