CSSクラスによって「隠されている」HTML要素をフェードアウト

Question

CSSクラスを追加することで、特定のHTML要素を非表示にすると便利な場合があります。このクラスにはdisplay: noneが設定されています。このjsFiddle exampleをご覧ください。

<!-- HTML --> 
<a id="toggle-a" href="javascript:void(0);">Hide A</a> 
<p id="p-a">A</p> 

/* CSS */ 
.hide { 
    display: none; 
} 

/* jQuery */ 
$("#toggle-a").click(function() { 
    $("#p-a").addClass("hide"); 
}); 

は、我々はそれに .hideを適用するとき p#aをアニメーション/フェードアウトする方法はありますか？

EDIT： 私の前の質問が明確でない場合は申し訳ありません。私は次の点に興味があります：CSSレベルのプロパティ変更時に.fadeOut()をトリガーできますか？上記の例では、p#aのdisplayが変更されたときですはnoneからnoneに変更されますか？ displayプロパティはhideという名前のクラスを適用することによって異なるスクリプトによってnoneに変更されていることに注意してください。

Answer 1

これは非常に基本的なjQueryです。フェードインまたはフェードアウトします。 JavaScriptのみが実際に多くのポイントは、クラスの変更のために、いくつかの別のリスナーを取り付けるには存在しない、クラスを変更することができますのでhttp://jsfiddle.net/afTdk/4/

：

$("#toggle-a").click(function() { 
    $("#p-a").fadeToggle(); 
}); 

デモ：あなたはここにfadeToggle()を使用することができます。

Answer 2

jQuery fadeIn()と​​の機能を確認してください。例：

$("#toggle-a").click(function() { 
    $("#p-a").fadeOut(); 
}); 

Answer 3

これはあなたが探しているものですか？

$("#toggle-a").click(function() { 
    $("#p-a").animate({'marginLeft':'200px'}, function() { 
     $(this).addClass('hide'); 
    }); 
}); 

あなたは@Madmartiganによって回答に基づいてjQueryのアニメーションについてhereを読むことができるし、また、「コールバック」（完全なパラメータ）と呼ばれる機能を見てみることを忘れないでください

Answer 4

、私は私がだったと思います現在、jQueryでは利用できないものを探しています。 jQueryが自動的にを監視する方法はありません。特定のHTML要素で発生するCSSの変更。あなたは基本的に手動で例えばif($("element").css('display') === 'block')」ではなく、それを実行する必要があり

はたぶんこれはjQueryのための未来の要求とすることができます:)