jQueryを使って要素を順番にフェードインさせる。

下記のサンプルの場合は”ul”タグのクラス名を”fade”とし、その中身の”li”の要素を順番にフェードインさせる方法。

via

[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する
   
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">  
$(function(){  
$('.fade li').hide();  
});  
var i = 0;  
var int=0;  
$(window).bind("load", function() {  
var int=setInterval("doFade(i)",500);  
});  
function doFade() {  
var list = $('.fade li').length;  
if (i >= list) {  
clearInterval(int);  
}  
$('.fade li').eq(i).fadeIn(1000);  
i++;  
}  
</script>  
<ul class="fade">  
<li>要素1</li>  
<li>要素2</li>    
</ul>  
   
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

four × 4 =