Jquery/Javascript looping div scroller

Question

私は5つのdivsをループインして永遠に作成しようとしています。 divには "text1" "text2" "text3"などのクラスがあります。このコードに問題はありますか？それは動作していないようです。

$(document).ready(function(){ 
    var num = 1 
    while(num =< 5) { 
     $('.text' + num).fadeIn().delay(4000).fadeOut() 
     var num = num ++i 

     if(num == 5) { 
      var num = 1 
     } 
     else{ 
      var num = num 
     } 
    } 
}); 

Answer 1

はfadeOutメソッド内でコールバック関数を利用してください：

$(document).ready(function() { 
    function fader(i) { 
     $('div.text' + i).fadeIn('slow') 
      .delay(4000).fadeOut('slow', function() { 
       fader(i % 5 + 1); 
      }); 
    } 

    fader(1); 
}); 

http://jsfiddle.net/mblase75/NXuVM/2/

Answer 2

無限ループします。 .delayは実行を一時停止せず、後で呼び出される関数を設定するだけです。あなたのコードは、fadeOutを4秒後に無限の回数呼び出すように設定します。

あなたが代わりにsetIntervalをしたい：

<div class="textContainer"> 
    <div>Text 1</div> 
    <div>Text 2</div> 
    <div>Text 3</div> 
    <div>Text 4</div> 
    <div>Text 5</div> 
</div> 

$(document).ready(function() { 
    var i = 0; 
    var divs = $('.textContainer div'); 
    setInterval(function() { 
     divs.eq(i).fadeOut(); 
     i = (i + 1) % divs.length; 
     divs.eq(i).fadeIn(); 
    }, 4000); 
});