jQuery 画像や要素をフェードイン

javascript関連
2014年3月6日

簡単な画像フェードインの方法。
jQueryを読み込んでおいて
cssで画像を入れるボックスを非表示にする。
例えばクラス属性のcontentに入れる場合は

.content
	{
	text-align: center;
	display: none;//非表示
	}

のようにして、javascriptを

$(function (){
a = $(".content"); 
a.fadeIn(1000);//ここは表示までの時間
});

のようにする。

複数の要素を時間差でフェードインさせるには以下を。

jQuery(document).ready(function(){
     jQuery("#title, #main-img").hide();
     jQuery("#title").delay(500).fadeIn(2000,function(){
     jQuery("#main-img").delay(500).fadeIn(3000);
	 })
});

桶ちゃんトップページに使用。タイトル(#title)が先にフェードインし、
続いて、スライド(#main-img)がフェードインする仕様。

PAGE TOP