jQuery エフェクト - フェードインおよびフェードアウト

前のページ jQuery 隠し/表示
次のページ jQuery スライド

jQueryを使うことで、要素のフェードインおよびフェードアウト効果を実現できます。

効果デモ

ここをクリックして、パネルを隠す/表示する

一寸金一寸時，そのため、私たちは簡単で理解しやすい学習コンテンツを提供します。

ここでは、理解しやすい便利なパターンで必要な知識を得ることができます。

例

jQuery fadeIn(): jQuery fadeIn() メソッドのデモンストレーション
jQuery fadeOut(): jQuery fadeOut() メソッドのデモンストレーション
jQuery fadeToggle(): jQuery fadeToggle() メソッドのデモンストレーション
jQuery fadeTo(): jQuery fadeTo() メソッドのデモンストレーション

jQuery フェードングメソッド

jQueryを使うことで、要素のフェードインおよびフェードアウト効果を実現できます。

jQuery は以下の 4 種の fade メソッドを持ちます：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

jQuery fadeIn() メソッド

jQuery fadeIn() は、隠された要素をフェードインするために使用されます。

语法：

$(selector.fadeIn(),,callback);

オプションの , パラメータは、効果の持続時間を定義します。以下の値を取ることができます："slow"、"fast"、またはミリ秒。

オプションの callback パラメータは、フェードが完了した後に実行される関数名です。

以下の例では、異なるパラメータを持つ fadeIn() メソッドを示しています：

例

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

実際に試してみてください

jQuery fadeOut() メソッド

jQuery fadeOut() メソッドは、見える要素をフェードアウトするために使用されます。

语法：

$(selector.fadeOut(),,callback);

オプションの , パラメータは、効果の持続時間を定義します。以下の値を取ることができます："slow"、"fast"、またはミリ秒。

オプションの callback パラメータは、フェードが完了した後に実行される関数名です。

以下の例は、fadeOut() メソッドに異なるパラメータを適用した場合を示しています：

例

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

実際に試してみてください

jQuery fadeToggle() メソッド

jQuery fadeToggle() メソッドは、fadeIn()とfadeOut()メソッド間で切り替えることができます。

要素が既にフェードアウトしている場合、fadeToggle() は要素にフェードイン効果を追加します。

要素が既にフェードインしている場合、fadeToggle() は要素にフェードアウト効果を追加します。

语法：

$(selector).fadeToggle(,,callback);

オプションの , パラメータは、効果の持続時間を定義します。以下の値を取ることができます："slow"、"fast"、またはミリ秒。

オプションの callback パラメータは、フェードが完了した後に実行される関数名です。

以下の例は、fadeToggle() メソッドに異なるパラメータを適用した場合を示しています：

例

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

実際に試してみてください

jQuery fadeTo() メソッド

jQuery fadeTo() メソッドは、指定された不透明度（0から1の間の値）に徐々に変化するようにします。

语法：

$(selector).fadeTo(,,opacity,callback);

必要な speed パラメータは、効果の持続時間を定義します。以下の値を取ることができます："slow"、"fast"、またはミリ秒。

fadeTo() メソッドに必要な opacity パラメータは、フェードイン/アウト効果の不透明度を設定します（0から1の間の値）。

オプションの callback パラメータは、この関数が実行された後に実行される関数名です。

以下の例は、fadeTo() メソッドに異なるパラメータを適用した場合を示しています：

例

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

実際に試してみてください

jQuery エフェクトリファレンスマニュアル

jQuery エフェクトを完全に確認するには、私たちの jQuery エフェクトリファレンスマニュアル。

前のページ jQuery 隠し/表示
次のページ jQuery スライド

カレンダー

jQuery チュートリアル