jQuery で時間差でアニメーション

よくFlashでTween系のアニメーションでdelay効果で時間差で表示させるアニメーションなどをしていたがこのたび、jQueryでも試してみた。

実行結果

eachメソッドのインデックスを元にdelayメソッドを実行

//最初のインデックスの子要素のliをeachメソッドでアニメーション
$con.eq(0).children().find("li").each(function(i){

//delay()メソッドで要素の数×0.15秒をかけてアニメーション
$(this).stop().delay(i*15).animate({opacity:1},1000);
});

といった感じで簡単です。サンプルではクリックした要素のインデックス番号を取得してアニメーションさせる要素のインデックスを同じインデックス番号にすることで対応しています。

以下全文

/$(document).ready(function(){
var $pre=null;
var $con=$("div.content");
	$con.not(":first").css({display:"none"});

var $items=$con.children();

$items.find("li").css({opacity:0});

$pre=$con.eq(0);

$con.eq(0).children().find("li").each(function(i){
$(this).stop().delay(i*15).animate({opacity:1},1000);
});

$("div#navi ul li").click(function(){
	var t=$(this).index();
	//
	if($pre!=null){
	$pre.css({display:"none"});
	$pre.children().find("li").animate({opacity:0},1000);
	}
	//
	$con.eq(t).css({display:"block"});
	$con.eq(t).children().find("li").each(function(i){
	
	$(this).stop().delay(i*18).animate({opacity:1},1000);
	});
	//
	$pre=$con.eq(t);
});

});