skuare.net

Tweet

使用方法
フォトグラファー 木村 隆宏ではJavaScriptライブラリjQueryを利用し、fade.jsでフェードを制御しています。
該当部分を抜粋し、汎用的に書き換えたのが以下となります。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>	
<script type="text/javascript">
$(function(){
	$('.fade li').hide();
});

var i = 0;
var int=0;

$(window).bind("load", function() {
	var int=setInterval("doFade(i)",100);
});

function doFade() {
	var list = $('.fade li').length;
	if (i >= list) {
		clearInterval(int);
	}
	$('.fade li').eq(i).fadeIn(1000);
		i++;
}
</script>

<ul class="fade">
	<li>要素1</li>
	<li>要素2</li>
	<!-- 以下要素分 -->
</ul>

$(function(){
	$('.fade li').hide(); //.fade liの要素をすべてhideする
});

var i = 0;
var int=0;

$(window).bind("load", function() { //ページが読み込まれたとき
	var int=setInterval("doFade(i)",100);  //関数doFadeを100ミリ秒ごとに実行
});

function doFade() { //関数doFadeです
	var list = $('.fade li').length; //要素の数を確認
	if (i >= list) { //要素の数に達したとき
		clearInterval(int); //setIntervalを解除します
	}
	$('.fade li').eq(i).fadeIn(1000); //要素を1000ミリ秒ごとにフェードインさせる
		i++;
}

コメントする

記事作成：2010年7月27日 12:59