2011-07-04 31 views

答えて

7

は、それらに共通のクラスを与え、そしてループの指数を乗じた所定の持続時間delay()[docs]方法でそれぞれを遅らせながらeach()[docs]方法を用いてループ内fadeIn()[docs]を行います。

$('li.someClass').hide().each(function(i) { 
    $(this).delay(i * 400).fadeIn(); 
}); 

各要素は、前回より400ミリ秒後に開始されます。

例:http://jsfiddle.net/4ANCj/

+0

美しい、ありがとう。 jsfiddlesをブラウズする方法はありますか?私は非常にそれに新しいです – iamwhitebox

+0

@ WHITEB0X:あなたが何を意味するかはっきりしていません。スクリプトの中央リポジトリのような意味ですか?私はjsFiddleに何らかの公開のショーケースがあることは知らない。他の人が投稿した直接のリンクが必要であると私は確信しています。しかし、誰が知っている?アカウントを登録すると、より多くの機能が見つかることがあります。 – user113716

+0

良い解決策。私は未知のブラウザ、CPUなどでも、JavaScriptのタイマーを100%正確にすることは決して信頼していません。私はこの方法を考えていないだろうが、小道具。 – AlienWebguy

3
function fade_in_recursive(e,duration,callback) 
{ 
    $(e).fadeIn(duration,function() 
    { 
     if($(e).next().length == 0) 
     { 
      if(typeof(callback) == 'function') 
      { 
       callback(); 
      } 
      return; 
     } 
     else 
     { 
      // Apply recursion for every sibling. 
      fade_in_recursive($(e).next(),duration,callback); 
     } 
    }); 

} // End fade_in_recursive 

$(function() 
{ 
    fade_in_recursive($('ul li:first-child'),500); 
}); 

http://jsfiddle.net/2s4L8/

関連する問題