jquery - jQueryでクラスを追加する方法は?

Question

このスクリプトにカーソルを合わせると、#PARENT divクラスが追加/削除highlightされます。このクラス (実際には color/background-img) をフェードさせることで、いくつかの優雅さを追加したいのですが、ここで失敗しますが、なぜですか?

あなたの快適さのためにフィドル: http://jsfiddle.net/4y4vQ/1/

<div id=PARENT>
    <div id=CHILD>Content</div>
</div>​
<script>
$("#PARENT").hover(function () {
    $(this).fadeIn('slow', function() {
        $("#PARENT").toggleClass("highlight");
    });
});​
</script>

Answer 1

jQuery UI Switch クラスを使用できます。これはまさに必要なことを行います

http://jqueryui.com/switchClass/

Answer 2

次のように CSS3 トランジションを使用します。

#PARENT{
  padding: 5px 10px;
  background: white;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
  }
#PARENT:hover {
  background: red;
  }

これはまた、クライアントによる多くの処理を必要としません。

Answer 3

fadeInそのようには機能しません。要素の不透明度を 0 から 1 に変更します。要素は既に表示されているため、何もしません。toggleClass はコールバックにあるため、アニメーションが終了するとすぐに呼び出されます。

でカスタム アニメーションを使用する必要があります.animate。