JQuery Farbanimation

Question

Ich bin mit einer Funktion festgefahren, die nicht animieren will ...

Ich benutze das Neueste JQuery Farb -Plugin Farbanimationen aktivieren. Was im folgenden Code passieren soll, ist das (wenn es natürlich funktioniert):

(1) Der Benutzer wählt eine Farbe aus (2) basierend auf dem RGB -Wert dieser Farbe. Wir erstellen einen leichteren Farbton dieser Farbe (3) Wenn Sie über einen Link schweben, wird die Farbe durch die neu berechnete Farbe ersetzt (4 ) Beim Abziehen des Links sollte die Originalfarbe in animiert werden.

Die Farbsubstitution funktioniert absolut in Ordnung, aber die Animation ist nicht so, dass sie derzeit eher wie ein traditioneller CSS -Schweberffekt aussieht als einer über 800 ms mit JQuery.

Wenn die Ninja da draußen mir helfen können, wäre ich mehr als bereit, Ihre Wurfsterne für eine Woche zu glänzen :). Hier ist der 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);
    });

Ihre Hilfe ist wie immer großartig und sehr geschätzt! Danke (und Mädchen natürlich), dass du einen Blick darauf angesehen hast :)

PS, um ein Live -Beispiel zu sehen, gehen Sie zu Demo -Seite und schweben Sie über einen Link ...

====== Update: Und mehr Hilfe benötigt ===== Cambracas Code darunter funktioniert perfekt. Abgesehen davon, dass es im IE zuerst zu einer sehr dunklen Farbe verblasst, kehrt dann bei der Mäuse zur Anfangsfarbe zurück, und wenn ich dann wieder darüber schwebe, wird die richtige neu berechnete Farbe angezeigt ...

Irgendwelche Ideen, wie man das für IE löst?

Answer 1

Versuche dies

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