Как использовать различные цвета для эффекта

Question

Рабочей скрипку: 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> 

Как я могу изменить сценарий, так что в зависимости от дочернего элемента, который парил, он будет анимировать с цветом ink класс, основанный на индексе.

Я также хотел бы установить цвет фона после окончания анимации.

Я попытался следующие, и он просто продолжает добавлять новый срок: https://jsfiddle.net/9u0ggeLL/4/

Answer 1

Во-первых, вы можете добавить массив цветов, которые вы хотите использовать в своем коде:

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

Тогда внутри hover обработчика вы можете назначить цвет из массива, используя переменную index у вас уже есть доступ к:

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

Working example

С другой стороны, было бы более и более расширяемой и проще в обслуживании, если вы назначаете цвета для родительских элементов в CSS, а затем прочитать их в коде JS, как это:

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

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

Working example