Animation de couleur jQuery

Question

Je suis coincé avec une fonction qui ne veut pas animer ...

J'utilise le dernier Plugin de couleur jQuery pour activer les animations de couleur. Maintenant, ce qui devrait arriver dans le code suivant est que (quand cela fonctionne bien sûr):

(1) L'utilisateur sélectionne une couleur, (2) basée sur la valeur RVB de cette couleur, nous créons une nuance plus claire de cette couleur, (3) lorsqu'il oscille sur un lien, sa couleur est remplacée par la couleur nouvellement calculée (4. ) Lors du départ du lien, la couleur d'origine doit être animée.

La substitution des couleurs fonctionne parfaitement, mais l'animation ne fait pas car elle ressemble actuellement plus à un effet de volonnier CSS traditionnel que plus de 800 mscs avec jQuery.

Si le ninja est là-bas peut m'aider, je serais plus que disposé à briller vos étoiles pendant une semaine :). Voici le code:

$('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);
    });

Votre aide, comme toujours, est géniale et très appréciée! Merci (et les filles, bien sûr) d'avoir jeté un coup d'œil :)

PS pour voir un exemple en direct, allez à page de démonstration Et survolez n'importe quel lien ...

===== Mise à jour: et plus d'aide nécessaire ===== Le code de Cambraca en dessous fonctionne parfaitement. Sauf que dans IE, il s'estompe d'abord à une couleur très foncée, puis revient à la couleur initiale lorsque je souris, puis lorsque je survole à nouveau, la couleur recalculée correcte affiche ...

Des idées sur la façon de résoudre ce problème pour IE?

Answer 1

Essaye ça

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);
});