jQuery Farbanimation

Question

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

ich die neuesten jQuery Color Plugin mit Farbanimationen zu ermöglichen. Nun, was im folgenden Code passieren sollte, ist (wenn es natürlich funktioniert):

(1) der Benutzer wählt eine Farbe, (2) basierend auf dem RGB-Wert dieser Farbe erstellen wir einen helleren Farbton dass Farbe, (3), wenn über eine Verbindung schwebt, es ist Farbe durch die neu berechnete Farbe ersetzt wird, (4), wenn die Verbindung der Losfahren, sollte die ursprüngliche Farbe in animiert werden.

die Farbersetzungsarbeiten absolut Gut, aber die Animation sieht nicht so aus, als ob sie mehr einem traditionellen CSS-Hover-Effekt ähnelt als einer, der über 800 ms mit jQuery gemacht wurde.

Wenn die Ninja da draußen mir helfen kann, wäre ich mehr als bereit, deine Wurfsterne für eine Woche zu strahlen :). 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, wie immer, ist super und sehr geschätzt! Dankeschöns (und Mädchen, natürlich) für einen Blick :)

PS ein anschauliches Beispiel zu sehen, gehen Sie zu demo page und einen Link schweben über ...

===== UPDATE: Und mehr Hilfe benötigt ===== Cambraca Code darunter funktioniert perfekt. Abgesehen davon, dass es in IE zuerst zu einer sehr dunklen Farbe verblasst, dann zu der Anfangsfarbe zurückkehrt, wenn ich die Maus ausschalte, und dann, wenn ich den Mauszeiger darüber bewege, wird die korrekte neu berechnete Farbe angezeigt ...

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

Answer 1

Versuchen Sie, diese

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