jQueryでのフェードイン・フェードアウトの方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでのフェードイン・フェードアウトの方法について、簡単に解説していきます。

要素のフェードイン

jQueryで要素をフェードインさせることは簡単です。

具体的には、fadeInメソッドで実現させることができます。

$('#hoge').fadeIn(1000);

上記のコードでは、hogeのidの要素を1秒かけてフェードインさせます。

要素のフェードアウト

フェードアウトも容易に可能です。

fadeOutメソッドで実装することができます。

$('#hoge').fadeOut(1000);

上記の例では、idがhogeの要素を1秒かけてフェードアウトさせます。

要素のフェードイン・フェードアウトの切り替え

表示状態を確認することなく切り替えることもできます。

fadeToggleメソッドでは要素が表示中ならフェードアウト、非表示中ならフェードインさせます。

$('#hoge').fadeToggle(1000);

上記のコードの例では、hogeというidを持つ要素が表示中ならフェードアウト、非表示中ならフェードインを1秒かけて行います。