jQuery入門 | エフェクト(effect)効果 | フェード効果 .fadeIn() .fadeOut() .fadeToggle()

Tags:

フェード(fade)効果

jQueryのフェード(fade)効果は、対象要素のCSS opacityプロパティ値を素早く変更して表現する。 このようなフェード効果を表現するために使用するメソッドは次のとおりである。

メソッド 説明
.fadeIn() 選択した要素のCSS opacityプロパティ値を徐々に上げながら要素を表示する。
.fadeOut() 選択した要素のCSS opacityプロパティ値を徐々に下げながら要素を非表示にする。
.fadeToggle() 選択した要素にfadeIn()メソッドとfadeOut()メソッドを交互に適用する。
.fadeTo() フェード効果で使用するopacityプロパティ値を直接設定する。

.fadeIn() .fadeOut()メソッド - 表示と非表示

.fadeOut()メソッドは選択した要素を徐々に消し、.fadeIn()メソッドは徐々に表示する。

$("#btnFadeOut").on("click", function() {
    $("div").fadeOut();
});
$("#btnFadeIn").on("click", function() {
    $("div").fadeIn();
});

上の例では、<div>要素を.fadeOut()メソッドで消し、.fadeIn()メソッドで表示している。

コードを実行

.hide() .show()メソッド - 効果速度の設定

引数にミリ秒(ms)の値を指定したり、“slow”、“fast"のような予約語を渡したりすることで、エフェクト効果の速度を設定することもできる。

$("#btnFadeOut").on("click", function() {
  $("div").fadeOut(1000);
});
$("#btnFadeIn").on("click", function() {
  $("div").fadeIn("fast");
});

上の例では、.fadeOut(1000)メソッドと.fadeIn("fast")メソッドに効果の速度を設定している。

コードを実行

.fadeToggle()メソッド - フェード効果の切り替え

jQueryでは、選択した要素の現在の表示状態に応じて異なる動作を行う.fadeToggle()メソッドを使用できる。
選択した要素が現在非表示であれば.fadeIn()メソッドの動作を行い、表示されている状態であれば.fadeOut()メソッドの動作を行う。

$("#btnFadeToggle").on("click", function() {
  $("div").fadeToggle();
});

上の例では、idがbtnFadeToggleである要素をクリックすると、<div>要素が表示と非表示を交互に繰り返す。

コードを実行

.fadeTo()メソッド - フェード効果の透明度設定

.fadeTo()メソッドを使用すると、フェード効果で使用する最終的なopacityプロパティ値を直接設定できる。

$("button").on("click", function() {
  $("#first").fadeTo(1000, 0.2);
  $("#second").fadeTo(1000, 0.5);
  $("#third").fadeTo(1000, 0.8);
});

上の例では、idが"first”、“second”、“third"である要素のopacityプロパティ値を、1秒かけてそれぞれ0.2、0.5、0.8に変更する。

コードを実行