jQueryで要素を非表示・表示するエフェクト

2年 ago
蓮, 翼
1 minute

jQueryで要素を非表示/表示するには、次のメソッドを使用します。

  1. 要素を非表示にするにはhide()メソッドを使用し、表示するにはshow()メソッドを使用します。この2つのメソッドは、アニメーションの速度を設定するためのオプションパラメーターを受け取ることができます。
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
  1. フェードイン()とフェードアウト()メソッド: fadeIn()メソッドを使用して要素をフェードイン、fadeOut()メソッドを使用して要素をフェードアウトできます。この2つのメソッドは、アニメーションの速度を設定するオプションのパラメーターを受け入れることもできます。
$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback);
  1. スライドダウン()とスライドアップ()メソッド:スライドダウン()メソッドを使用して要素をスライドダウンして表示したり、スライドアップ()メソッドを使用して要素をスライドアップして非表示にしたりできます。どちらのメソッドも、アニメーションの速度を設定するためのオプションのパラメータを受け入れることができます。
$(selector).slideDown(speed, callback);
$(selector).slideUp(speed, callback);
  1. toggle()メソッド：toggle()メソッドを使って要素の可視を切り替えることができます。要素が隠れている場合は表示へ、表示されている場合は隠蔽へと切り替えます。
$(selector).toggle(speed, callback);

セレクタは要素のID、クラス、タグ名などを指定し、speedはアニメーションのスピードで「slow」、「fast」、数値を指定し、callbackはオプションのコールバック関数で、アニメーション完了後に実行されます。

サンプルコード:

$("#myElement").hide(); // 隐藏元素
$("#myElement").show(); // 显示元素
$("#myElement").fadeIn(); // 淡入显示元素
$("#myElement").fadeOut(); // 淡出隐藏元素
$("#myElement").slideDown(); // 向下滑动显示元素
$("#myElement").slideUp(); // 向上滑动隐藏元素
$("#myElement").toggle(); // 切换元素的可见性
bannerAds