jQuery エフェクト - フェードイン/アウト

jQueryは、さまざまな驚くべき効果を実行するためのシンプルなインターフェースを提供します。

jQuery効果メソッドは、最少の設定で一般的な効果を迅速に適用できるようにします。

jQuery フェードイン/アウト メソッド

jQueryを使用すると、フェードインやフェードアウト効果を実現できます。

以下にjQueryのフェードイン/アウトメソッドがあります：

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

次のセクションでは、各フェードイン/アウトメソッドの使用法を説明します。

jQuery fadeIn()とfadeOut()

jQuery fadeIn()このメソッドは、選択された要素の不透明度を非可視から可視に徐々に変更します。

jQuery fadeOut()このメソッドは、選択された要素の不透明度を可視から非可視に徐々に変更します。

以下の例では、fadeIn()とfadeOut()メソッドの使用法を示します：

//　表示されている段落をフェードアウトします。
$("#fadeout-btn").click(function(){
　　$("p").fadeOut();
});
//　隠された段落をフェードインします。
$("#fadein-btn").click(function(){
　　$("p").fadeIn();
});

これはfadeIn()方法の文法：

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

これはfadeOut()方法の文法：

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

どちらの順序でもfadeIn()およびfadeOut()メソッドは3つのオプション引数を受け取ります：

• duration -フェードイン/アウト効果が持続時間。可能な値は「slow」、「fast」またはミリ秒です。

• easing -トランジションに使用するエイジング機能を示します。可能な値は「swing」、「linear」です。

• callback-指定されたフェードイン/アウトが完了した後に呼び出される関数を指定します。

以下の例では、fadeIn()とfadeOut()を使用してdurationパラメータ：

$("#fadeout-btn").click(function(){
　　$("p").fadeOut(1500);
});
$("#fadein-btn").click(function(){
　　$("p").fadeIn(1500);
});

以下の例では、fadeIn()とfadeOut()を使用したコールバックパラメータ：

$("#fadeout-btn").click(function(){
　　$("div").fadeOut(600,　function(){
　　　　$("h3").text("フェードアウト完了.");
　　});
});
$("#fadein-btn").click(function(){
　　$("div").fadeIn(600,　function(){
　　　　$("h3").text("フェードイン完了.");
　　});
});

すべてのスペース（この場合、単語）に対してアニメーション処理を行い、200ミリ秒で各アニメーション処理を完了します：

$("button").click(function(){
　　$("span:last-child").fadeOut("fast",　function(){
　　　　$(this).prev().fadeOut("fast",　arguments.callee);
　　});
});

jQuery fadeToggle()メソッドを使用して

さらに、fadeToggle()メソッドはHTML要素のフェードインとフェードアウトの間で切り替えます。

選択された要素がフェードアウトしている場合、fadeToggle()それをフェードインします。

選択された要素がフェードインしている場合、fadeToggle()をフェードアウトします。

以下の例では、すべての<p>要素のフェードインとフェードアウトの間で切り替えます：

$("button").click(function(){
　　$("p").fadeToggle();
});

これはfadeToggle()方法の文法：

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

このfadeToggle()メソッドは3つのオプション引数を受け取ります：

• duration -フェードイン/アウト効果が持続時間。可能な値は「slow」、「fast」またはミリ秒です。

• easing -トランジションに使用するエイジング機能を示します。可能な値は「swing」、「linear」です。

• callback-指定されたフェードイン/アウトが完了した後に呼び出される関数を指定します。

jQuery fadeTo()メソッド

jQuery fadeTo()メソッドは選択された要素の不透明度を指定された不透明度に徐々に変更します。

注意：このfadeTo()このメソッドはページのレイアウトを変更しません（選択された要素は以前と同じスペースを占めます）。

この例では、要素の不透明度を徐々に減少させます<div>要素の不透明度：

$("button").click(function(){
　　$("div").fadeTo(500,　0.2);
});

これはfadeTo()方法の文法：

$(selector)fadeTo.(duration,　opacity,　easing,　callback)

パラメータ：

• duration -フェードイン/アウト効果が持続時間。可能な値は「slow」、「fast」またはミリ秒です。

• opacity-フェードインする不透明度を指定します。0.00から1.00の間の数字

• easing -（オプション）移行に使用されるエッジング機能を指定します。可能な値は「swing」、「linear」です。

• callback-（オプション）フェードイン/アウトが完了した後に呼び出される関数を指定します。

以下の例はfadeTo()を持つコールバックパラメータ：

$("button").click(function(){
　　$("div").fadeTo(500,　0,　function(){
　　　　alert("不透明度が低下!!!");
　　});
});

jQuery効果リファレンス

完全な効果リファレンスについては、私たちのjQuery Effectsのリファレンスマニュアル。