jQuery colorplugin останавливает CSS: работа при наведении

Question

Я использую плагин цвета jQUery .У меня есть элемент li, который при наведении курсора меняет цвет фона.Это делается с помощью стандартного псевдокласса :hover CSS в файле CSS.Это работает нормально, пока я не использую плагин цвета для него - эффект :hover просто перестает работать, когда я «пульсирую» элемент, используя этот код:

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

Может кто-нибудь предложить решение, чтобы, когдаотображается «пульс», оригинальное поведение :hover продолжает работать?

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

Проблема заключается в явном заданном цвете фона элемента, который переопределяет CSS.В конце вашей анимации очистите цвет фона следующим образом:

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

Рабочий пример: http://jsfiddle.net/SyqSf/