Wie andere Farbe für Effekt verwenden

Question

Arbeits Fiddle: https://jsfiddle.net/9u0ggeLL/3/

HTML:

<ul> 
    <li id="one"><a>Dashboard</a></li> 
    <li id="two"><a>My Account</a></li> 
    <li id="three"><a>Direct Messages</a></li> 
</ul> 

Wie kann ich das Skript ändern, so dass je nach dem Kind Elemente, das schwebte ist, wird es mit der Farbe animiert ink Klasse basierend auf dem Index.

Ich möchte auch, die Hintergrundfarbe zu dem nach der Animation zu stoppen.

Ich habe versucht, die folgenden, und es hält nur neue Spanne hinzufügen: https://jsfiddle.net/9u0ggeLL/4/

Answer 1

Zum einen können Sie ein Array von den Farben hinzufügen, die Sie in Ihren Code verwenden möchten:

var colors = ['red','blue','green']; 

dann innerhalb der hover Handler Sie können die Farbe aus dem Array zuweisen die index Variable haben Sie bereits Zugriff auf:

ink.css('background-color', colors[index]); 

Working example

Alternativ wäre es mehr beide mehr erweiterbar und einfacher zu warten, wenn Sie die Farben an die übergeordnete Elemente in CSS zuweisen und sie dann in der JS-Code lesen, wie folgt aus:

#one { color: #C00; } 
#two { color: #0C0; } 
#three { color: #00C; } 

ink.css('background-color', parent.css('color')); 

Working example