Das Problem ist bekannt: Mit der animate()-Methode von jQuery können lediglich numerische Style-Variablen animiert werden. Was aber machen wenn eine Farbwert-Animation benötigt wird? Beispielsweise um bei Hover die Hintergrundfarbe eines Elementes gleichmäßig zu ändern.
Entweder man bindet ein Plugin ein, verwendet gleich eine große Library oder aber man nutzt die Möglichkeiten die einen CSS3 schon heute bietet. Die Transition-Eigenschaft, welche in allen modernen Browsern gut funktioniert, ist in der Lage diese Anforderung in wenigen Zeilen umzusetzen.
Beispiel: Hintergrund-Animation bei Hover
Ja wirklich, dieser Code reicht aus, um unsere Hintergrund-Animation auf das Element #foo anzuwenden.
[css]#foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
#foo:hover {
background:yellow;
}[/css]
Die Transition-Eigenschaft (inkl. aller Browser-Prefixe) sorgt dafür, dass jegliche Änderung der background-Eigenschaft, mit einer 1-sekündigen-Animation durchgeführt werden. Das kann natürlich auch abgeändert werden, um zum Beispiel die Schriftfarbe (color) oder die Rahmen-Farbe (border-color) zu animieren. Natürlich bietet die Transition-Eigenschaft die Möglichkeit fast alle CSS-Werte animierend zu ändern. Ganze Animations-Abfolgen können via Keyframe-Animation realisiert werden.
Noch schneller geht es mit SCSS/SASS und Compass:
[css]#foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}[/css]
Soll der Effekt erst ab einer bestimmten User-Interaktion starten, muss die gewünschte Zielfarbe einfach in einer Klasse gespeichert werden, welche man dem Element via JavaScript zuweist. Viel Spaß!