jQuery colorplugin stop CSS：ホバー動作

Question

私はjQUery color pluginを使用しています。私はliという要素を持っています。その要素を上に置くと背景色が変わります。これはCSSファイルの標準:hover 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: ''}); 
    }); 

作業例：このような背景の色出し明確なアニメーションの終わりには、あなたがこのような単純な答えを:-D http://jsfiddle.net/SyqSf/