JQuery colorplugin stops CSS: freezes

Question

I am using jQuery plugin. I have an element lithat, when frozen, changes the background color. He does this using the standard CSS CSS alias in the :hoverCSS file. This works great until I use the color plugin on it - the effect :hoverjust stops working when I “pulsate” an element using this code:

$(".elements").first()
              .delay(400)
              .css({ backgroundColor: '#eeeeee' })
              .animate({ backgroundColor: '#888888' }, 2000);

Can someone suggest a solution so that when the “momentum” is displayed, the original behavior :hovercontinues to work?

Answer 1

:hover !important, , JavaScript , .

Answer 2

- , :

$(".elements").hover(function(){
  $(this).stop().removeAttr('style')},
function(){
  $(".elements").first().delay(400).css({backgroundColor: '#eeeeee'}).animate({backgroundColor: '#888888'}, 2000);
});

css :

li:hover {
  background:red !important;
}

Answer 3

The problem is the explicit background color specified by the element that overrides CSS. At the end of the animation, clear the background color as follows:

$(".elements").first()
    .delay(400)
    .css({backgroundColor: '#eeeeee'})
    .animate({backgroundColor: '#888888'}, 2000, function() {
        $(this).css({backgroundColor: ''});
    });

Working example: http://jsfiddle.net/SyqSf/