jQueryを使用してCSSスタイルのホバー状態をフェードアウトさせてアニメ化

Question

jQueryを使用して1つのスタイルのすべてのCSSプロパティーをフェードインすることは可能ですか？そして、あなたがスタイルとそれを定義しているならば：つまり、残りのことをするスクリプトであるcssだけで、ホバー状態です。例：

.button1 { 
background: url(img1.jpg) repeat-x top left; 
color: #000; 
} 
.button1:hover { 
background: url(img2.jpg) repeat-x top left; 
color: #F00; 
} 

そして、jQueryスクリプトで多くの同様のボタンを実行したい場合は可能ですか？または、唯一の方法は2つの異なるCSSスタイルを定義することですか？

Answer 1

あなたはクラスであなたのホバーCSSを交換するとjQuery UI ToggleClassアニメーション使用することができますしたい場合は

$(".button1").hover(function() { 
    $(this).toggleClass("button1_hover_class", 1000); 
    return false; 
}); 

：

CSS：

.button1:hover, 
.button1_hover_class { 
    background: url(img2.jpg) repeat-x top left; 
    color: #F00; 
} 

はJavaScriptをCSSのホバーとJavaScriptのホバーの両方を使用するには、 ncelは、javacript hover関数のデフォルトアクションです。

編集：はあなたの他の質問に答えるためには、JavaScript上記.button1クラスですべてのボタンに適用されますが、あなたはあまりにも.button2にそれを追加したい場合は、あなたが例えば使用することができます。

$(".button1, .button2").hover(function() { 

Answer 2

アニメーションメソッドでCSSを変更し、ホバーイベントにバインドします。

Answer 3

たとえば、クラス$(".animates").hover(function(e){})のすべての要素を選択し、ホバーハンドラ内のe.targetにある.animate() method from jQueryを使用してください。 例：また

<div class="animates">Lipsum</div> 
<script> 
     $(".animates").hover(function(e){ 
      $(e.target).animate(); 
     }); 
</script> 

、あなたはまた、CSS3トランジションを使用することができますが、彼らは大規模な、まだサポートされていないので、それはあなたがあなたの観客は常に自分のブラウザを更新知っている限りjQueryのアニメーションと一緒に安全です。 ：P