jqueryでフェードイン、フェードアウトをするには

jqueryなら簡単にアニメーションででフェードイン、フェードアウトを作ることができます。

ここで使っているのが

$("セレクター").fadeIn(スピード)
$("セレクター").fadeOut(スピード)

スピードは
slow・何も書かない・fast で
600・400・200ミリ秒 スピードを変更でき
数字を入れることで?ミリ秒で表示、非表示スピードを調整できます。
プレビューはslowで0.6秒です。

html

<button id="fadeIn">表示</button>
<button id="fadeOut">非表示</button>
<p><img src="img.jpg" /></p>

jquery

$(function(){
	$("button#fadeIn").click(function(){
		$("img:not(:animated)").fadeIn("slow");
	});
	$("button#fadeOut").click(function(){
		$("img:not(:animated)").fadeOut("slow");
	});
});
$("button#fadeIn").click

<button id="fadeIn">表示</button>

をクリックしたときにfunction(){…}が実行されます。

:not(:animated)

アニメーションが動いているときは実行できないように設定。


コメントする