jqueryのループでページに配列の内容を表示

Question

divに表示したいいくつかの文字列がありますが、フェードイン/アウトし、配列内の次の文字列に置き換えて最初に戻します。

forkodeの#jqueryからIRCが提案した.queueを使用していますが、動作していないようです。何も表示されません。

どこが間違っていますか？

このコードはthe last example on jquery's .queue page

<div class="introText"></div> 

<script> 
    /* 
     Fade each above string in and out as content for the div sequentially 
     in a loop 
    */ 
    var Messages = [ 
     "Matured Dieting via Smartphone", 
     "The Academic IQHE Diet", 
     "For only R 400.00/year", 
     "Follow this super diet on mobile", 
     "<a href=\"http://www.m.smartpeeps.co.za\">m.smartpeeps.co.za</a>" 
    ]; 

    function IntroText() { 
     var i = 0; 
     var Div = $(".introText"); 

     // div text should start with Messages[0] and loop to 
     // Messages[4], the restart at Messages[0] 
     $.each(Messages, function() { 
      // hide the previously shown item 
      if (i == 0) { 
       if (i >= 4) { 
        $.queue(Div[0], "fx", function() { 
         $(this).hide("slow"); 
         $.dequeue(this); 
        }); 
       } else { 
        $.queue(Div[0], "fx", function() { 
         $(this).html(Messages[i - 1]).hide("slow"); 
         $.dequeue(this); 
        }); 
       } 

       // display the new item 
       $.queue(Div[0], "fx", function() { 
        $(this).html(Messages[i]).show("slow"); 
        i = i++; 
        $.dequeue(this); 
       }); 
      } else { 
       // loop back and display the first item again 
       $.queue(Div[0], "fx", function() { 
        i = 0; 
        $(this).html(Messages[i]).show("slow"); 
        $.dequeue(this); 
       }); 
      } 
     }); 
    } 

    // run it 
    IntroText(); 
</script> 

Answer 1

一つの解決策に基づいていたがsetInterval()を使用するための適切なループを作るです。コンテンツを表示/非表示にするには、fadein()/​​とモジュロ%でカウントを再開する必要があるかどうかを確認できます。 startMessageは、いずれかの項目からループメッセージを開始できるようにします。

/* 
 
     Fade each above string in and out as content for the div sequentially 
 
     in a loop 
 
    */ 
 
    var Messages = [ 
 
     "Matured Dieting via Smartphone", 
 
     "The Academic IQHE Diet", 
 
     "For only R 400.00/year", 
 
     "Follow this super diet on mobile", 
 
     "<a href=\"http://www.m.smartpeeps.co.za\">m.smartpeeps.co.za</a>" 
 
    ]; 
 
    
 

 
    
 
    function IntroText() { 
 
     var Div = $(".introText") 
 
     var startMessage = 0; 
 
     setInterval(function(){ 
 
      Div.html(Messages[startMessage]).fadeIn().delay(1000).fadeOut(); 
 
      startMessage++; 
 
      if(startMessage % Messages.length == 0){ 
 
      startMessage=0; 
 
      } 
 
     },2000) 
 
    } 
 

 
    // run it 
 
    IntroText();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="introText" style="display:none"></div>