[ ブックマーク ] jQueryで画像を次々にフェードインさせながら表示する方法

ユニークな画像の表示方法を紹介しているblogを発見しました。画像の一覧を遅延させながら一枚ずつ表示する方法です。

Java Script

$(function(){
	$(window).load(function(){
		var delaySpeed = 100;
		var fadeSpeed = 1000;
		$('ul li').each(function(i){
$(this).delay(i*(delaySpeed)).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
		});
	});
});
</script>

「delay」という遅延をさせるjQueryのエフェクトも初めて知りましたし、

Java Script

	$('ul li').each(function(i){
$(this).delay(i*(delaySpeed))

という書き方で、li要素を次々と遅延させながら表示させることができるのも初めて知りました。

Java Script

	$('ul li').each(function(){
$(this).delay(delaySpeed)

と記述してしまうと、全てのli要素が同時に表示されてしまいます。