2012-05-14

[jQuery] 画像をフェードしながら順番に表示

画像の一覧をページが表示されたときに、順番にフェードしながら表示するjQuery。
あんまりやりすぎるとくどくなったりもするのですが、
イメージを打ち出したいポートレート系のサイトなどではいい感じになると思います。


delay()メソッドを使用しているので、jQueryは1.4以上が必要になります。
jQueryだけのお手軽コードで動くのもかなりうれしいですね。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#imagelist li').hide();
$('#imagelist li').each(function (i) {
$(this).delay(i * 100).fadeIn(1000);
});
});
</script>


参考サイト
http://depthcode.com/2010/11/fadebox.html

Comment:

Trackback URL: