CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Si8
Si8

Reputation: 9235

How to use different color for effect

Working 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>

How can I modify the script, so depending on the child item that is hovered, it will animate with the color ink class based on the index.

I also, would like to set the background color to that after the animation stops.

I tried the following and it just keeps adding new span: https://jsfiddle.net/9u0ggeLL/4/

Upvotes: 2

Views: 36

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337627

Firstly you can add an array of the colours you want to use to your code:

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

Then inside the hover handler you can assign the colour from the array using the index variable you already have access to:

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

Working example

Alternatively, it would be more both more extensible and easier to maintain if you assign the colours to the parent elements in CSS and then read them in the JS code, like this:

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

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

Working example

Upvotes: 3

Related Questions