Ändern von Text nach Zeitraum, in einem endlosen Zyklus

Question

Ich habe Text, den ich nach einer bestimmten Zeit ändern möchte. Ich habe diese Arbeit:

function nextMsg() { 
    if (messages.length == 0) { 

    } else { 
     $('#message').html(messages.pop()).fadeIn(500).delay(1000).fadeOut(500, nextMsg); 
    } 
}; 

var messages = [ 
    "sleep", 
    "eat", 
    "drink", 
    "read", 
].reverse(); 

$('#message').hide(); 
nextMsg(); 

Siehe JSFIDDLE

Meine Frage: ich behalten möchten, die Nachrichten zu wiederholen. Mit anderen Worten, wenn die letzte Nachricht angezeigt wird, wird der Zyklus von der ersten Nachricht an erneut gestartet, wobei ein endloser Zyklus erzeugt wird. Was muss geändert/hinzugefügt werden?

Answer 1

Ich hoffe, dies wird für Sie arbeiten.

var fadeLoop = function($el) { 
 
    $el.fadeOut(1000, function() { 
 
     var $next = $el.next(); 
 
     if ($next.length == 0) { 
 
      $next = $el.siblings(":first"); 
 
     } 
 
     $next.fadeIn(1000, function() { 
 
      fadeLoop($next); 
 
     }); 
 
    }); 
 
}; 
 

 
$(document).ready(function(){ 
 
    $("#elm1").siblings().hide(); 
 
    fadeLoop($("#elm1")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
Things to do: 
 
<div > 
 
<span id="elm1">sleep</span> 
 
<span id="elm2">eat</span> 
 
<span id="elm3">drink</span> 
 
<span id="elm4">read</span> 
 
    </div>

Quelle: http://jsfiddle.net/KWmgf/

Answer 2

Verwenden counter mit %

var counter = 0; 
 

 
function nextMsg() { 
 
    $('#message').html(messages[counter % messages.length]).fadeIn(500).delay(1000).fadeOut(500, nextMsg); 
 
    ++counter; 
 
}; 
 
var messages = [ 
 
    "sleep", 
 
    "eat", 
 
    "drink", 
 
    "read", 
 
]; 
 
$('#message').hide(); 
 
nextMsg();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<p> 
 
    Things to do: <span id="message"></span> 
 
</p>

Answer 3

so etwas wie this vielleicht.

JS

var i=0; 

function nextMsg() { 
    $('#message').html(messages[i]).fadeIn(500).delay(1000).fadeOut(500, nextMsg); 
    i = (++i)%messages.length; 
}; 

var messages = [ 
    "sleep", 
    "eat", 
    "drink", 
    "read", 
].reverse(); 

$('#message').hide(); 
nextMsg();