Blog

HOME > Web > JQuery > 【jQuery】jQueryでli要素を順番にフェードさせながら表示する

【jQuery】jQueryでli要素を順番にフェードさせながら表示する

2016/01/29

JQuery

備忘録です。

jQueryでli要素を順番にフェードさせながら表示する方法です。

参考サイト
http://www.dataplan.jp/blog/jquery/203

HTML

<div id="fadein_area">
    <ul>
        <li><img src="./sample1.jpg" /></li>
        <li><img src="./sample2.jpg" /></li>
        <li><img src="./sample3.jpg" /></li>
        <li><img src="./sample4.jpg" /></li>
        <li><img src="./sample5.jpg" /></li>
    </ul>
</div>

script

<script type="text/javascript">
$(function(){

	// リストを非表示
	$('#fadein_area ul li').hide();

	// 繰り返し処理
	$('#fadein_area ul li').each(function(i) {

		// 遅延させてフェードイン
		$(this).delay(500 * i).fadeIn(1000);

	});

});
</script>

実装するとカッコよくなります。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ