JQueryのお勉強

要素を順番にフェードしながら表示させてみる．２

jquery-1.5.1.min.js

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
JS
$(function() {

	$(".fadeInItems li").each(function(i){
		$(this)
		.hide()
		.delay(100+(i*100))
		.fadeIn("slow");	
	});
	
});

一応、これが一番短くできたソース。

単純に指定要素<li>に対して順番に処理してみただけ。

上から順番に処理するだけならこれで十分かと

※上から順番に表示していく段階で背景に敷いた色もあわせて下に伸びていくのは表示前の高さとしてエリアサイズが指定されていないからで、全体のレイアウトを固定したい場合は予め高さを指定しておけばいい。