jQueryの基本的なチュートリアル

jQueryの効果

fadeIn()メソッドとともに使用されます。選定された要素の不透明度を徐々に非表示から表示に変更します。

この方法は通常fadeOut()方法を一緒に使用します。

注意：隠れた要素はページのレイアウトに影響を与えなくなります。

これはfadeTo()方法は似ているが、この方法は隠れた要素を解除しないし、最終的な不透明度レベルを指定できます。

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

<div>要素にフェードイン：

例

$("button").click(function(){
　　$("div").fadeIn();
});

すべての<p>要素にフェードイン：

例

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

使用durationパラメータ：

例

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

使用callbackパラメータ：

例

$("button").click(function(){
　　$("div").fadeIn(600,　function(){
$("h3").text("フェードイン完了。");
　　});
});

私たちは、簡単な画像などの任何要素にフェードイン/アウト効果を実現できます：

例

$("button").click(function(){
　　$("img").fadeIn();
});

パラメータ	説明
duration	（オプション）フェードアウト効果がどれくらいの長さで続くかを決定します。デフォルト値は400ミリ秒可能な値：ミリ秒（例えば100、500、2000など）「fast」「slow」
easing	（オプション）アニメーションの異なるポイントで要素の速度を指定します。デフォルト値は「swing」可能な値：「swing」-始めに/終わりに移動が遅く、途中で移動が速い「linear」-一定速度で移動
callback	（オプション）fadeIn()メソッドが完了した後、各選択された要素に対して一度呼び出される関数