Ausblenden und ersetzen ein Div mehrmals

Question

Okay. Also habe ich ein Div und habe herausgefunden, wie man es ausblendet und durch einen bestimmten Text ersetzt.

Allerdings möchte ich den zweiten Text, der ebenfalls ausgeblendet wird, und ein drittes Div, das eingeblendet wird. Danach möchte ich, dass das vierte Div das dritte und so weiter ersetzt.

Wie genau kann ich das erreichen?

Hier ist mein Code: http://jsfiddle.net/9Dubr/1/

<div id="foo">test</div> 

$('#foo').delay(5000).fadeOut("slow", function(){ 
var div = $("<div id='foo'>test2</div>").hide(); 
$(this).replaceWith(div); 
$('#foo').fadeIn(500); 
}); 

Answer 1

Versuchen Sie, diese rekursive Funktion

function fadeMessages(arr) { 
 
    if (arr.length == 0) return; 
 
    $('#foo').fadeOut("slow", function(){ 
 
     $("#foo").html(arr[0]).hide().fadeIn("slow", function() { 
 
      arr.shift(); 
 
      fadeMessages(arr); 
 
     }); 
 
    }); 
 
} 
 

 
fadeMessages(["good", "morning", "to", "everyone", "<img src='https://38.media.tumblr.com/avatar_4892c96bf7cb_128.png'><br><button> OK </button>"]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="foo">test</div>

Answer 2

Sie können dies versuchen,

function changeHtml(html, callback) { 
 

 
$('#foo').fadeOut("slow", function(){ 
 
    $(this).html(html); 
 
    $(this).fadeIn("slow", callback); 
 
}); 
 
    
 
} 
 

 
changeHtml('test2', function() { 
 
    changeHtml('test3', function() { 
 
    changeHtml('<img src=""/>', function() { 
 
    
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="foo">test</div>