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)
アニメーションが動いているときは実行できないように設定。