состояние при наведении цвет фона потерял после яваскрипта выполнения сценария

Question

Оригинальный Jquery:

$('#container section').each(function() { 
       $(this).waypoint(function(direction) { 
        var anchorRef = 'a[href="#' + this.id + '"]'; 
        if (direction === 'down') { 
         $(anchorRef).animate({'backgroundColor' : 'rgb(230, 77, 78)'}); 
        } else { 
         $(anchorRef).animate({'backgroundColor' : 'rgb(25, 25, 25)'}); 
        } 
       }); 
      }); 

CSS-:

.main-menu ul li a:hover { 
    background-color: #333; 
} 

Проблема заключается в том, что после того, как эта анимация заканчивается, если мы вернемся к этому элементу, эффект зависания больше не применяется.

Любая подсказка почему?

Я пытался «силой» завышать по сценарию, как это:

$('#container section').each(function() { 
       $(this).waypoint(function(direction) { 
        var anchorRef = 'a[href="#' + this.id + '"]'; 
        var anchorRefHover = 'a[href="#' + this.id + '"]:hover';//NEW 
        if (direction === 'down') { 
         $(anchorRef).animate({'backgroundColor' : 'rgb(230, 77, 78)'}); 
         $(anchorRefHover).css({backgroundColor : '#333'});//NEW 
        } else { 
         $(anchorRef).animate({'backgroundColor' : 'rgb(25, 25, 25)'}); 
         $(anchorRefHover).css({backgroundColor : '#333'});//NEW 
        } 
       }); 
      }); 

Еще потерял парения эффект рынка на CSS.

Я добавил важное значение в правило наведения CSS. Это вызывает зависание. Но причина, в то время как я предпочитаю это делать Использование JavaScript его потому, цвет парения фон должен применяться только тогда, когда элемент у нас парить не имеет фона RGB (230, 77, 78)

Не уверен, если он будет работать, но я думаю о добавлении важного с помощью javascript, когда это имеет место ... но, возможно, есть лучший способ?

Любой ключ, который поможет мне?

Примечание: Вот скрипку благодаря koala_dev Эффорд:

http://jsfiddle.net/talofo/5YgY5/5/

Answer 1

Как отмечалось @DomDay в комментарии, JQuery .animate() использует встроенные стили, которые замещают ваши правила CSS, так что одно решение было бы удалить рядный заявление, когда вы убираете цвет к оригиналу, как это:

$(anchorRef).animate({'backgroundColor': 'rgb(25, 25, 25)'},function(){ 
    $(this).removeAttr('style'); 
}); 

Working fiddle