jQueryエフェクト-フェード

❮ 前次 ❯

jQueryを使用すると、要素をフェードインおよびフェードアウトして表示できます。

クリックしてフェードイン/フェードアウトパネル

時間は貴重なので、迅速かつ簡単に学習できます。

W3Schoolsでは、アクセス可能で便利な形式で、学習する必要のあるすべてのものを学習できます。

例

jQueryのfadeIn（）メソッドを示します。

jQueryのfadeOut（）メソッドを示します。

jQueryのfadeToggle（）メソッドを示します。

jQueryのfadeTo（）メソッドを示します。

jQueryフェージングメソッド

jQueryを使用すると、要素をフェードインおよびフェードアウトして表示できます。

jQueryには次のフェードメソッドがあります。

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

jQueryのfadeIn（）メソッド

jQueryfadeIn()メソッドは、非表示の要素をフェードインするために使用されます。

構文：

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

オプションの速度パラメータは、効果の持続時間を指定します。次の値を取ることができます：「遅い」、「速い」、またはミリ秒。

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

次の例は、fadeIn()さまざまなパラメーターを使用したメソッドを示しています。

例

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

jQueryのfadeOut（）メソッド

jQueryfadeOut()メソッドは、表示されている要素をフェードアウトするために使用されます。

構文：

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

オプションの速度パラメータは、効果の持続時間を指定します。次の値を取ることができます：「遅い」、「速い」、またはミリ秒。

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

次の例は、fadeOut()さまざまなパラメーターを使用したメソッドを示しています。

例

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

jQueryのfadeToggle（）メソッド

jQueryfadeToggle()メソッドはfadeIn()とfadeOut() メソッドを切り替えます。

要素がフェードアウトしている場合は、fadeToggle()フェードインします。

要素がfadeToggle()フェードインしている場合は、フェードアウトします。

構文：

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

オプションの速度パラメータは、効果の持続時間を指定します。次の値を取ることができます：「遅い」、「速い」、またはミリ秒。

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

次の例は、fadeToggle()さまざまなパラメーターを使用したメソッドを示しています。

例

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

jQueryのfadeTo（）メソッド

jQueryfadeTo()メソッドを使用すると、特定の不透明度（0〜1の値）にフェードインできます。

構文：

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

必要な速度パラメータは、効果の持続時間を指定します。次の値を取ることができます：「遅い」、「速い」、またはミリ秒。

メソッドに必要な不透明度パラメーターは、fadeTo()指定された不透明度（0から1の間の値）へのフェードを指定します。

オプションのコールバックパラメータは、関数の完了後に実行される関数です。

次の例は、fadeTo()さまざまなパラメーターを使用したメソッドを示しています。

例

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

jQueryの演習

jQueryエフェクトリファレンス

すべてのjQueryエフェクトの完全な概要については、 jQueryエフェクトリファレンスにアクセスしてください。

❮ 前次 ❯

jQueryチュートリアル