JQueryのお勉強

要素を順番にフェードしながら表示させてみる [SAMPLE 1]

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

まず対象となる<li>タグに連番でid属性を与える。

そして次に割り振られたid属性をもつ<li>を順に表示。

処理的には２回に分けているが、この方法だとid属性の部分をタグに直接指定することで表示の順番を自由に指定することも出来る。

JS
$(function() {

	/* 対象要素に連番でidを付与 */
	$(".fadeInItems li").attr("id", function (i){
		return "fadeInNum" + (i++);
	});

	/* 対象要素を順番に表示 */
	$(".fadeInItems li").each(function(i){
			$("#fadeInNum"+i)
			.hide()
			.delay(100+(i*100))
			.fadeIn("slow");	
	});

});

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