jQuery ein-/ausblenden, jedes Element in der Liste

Question

Das Problem ist, dass ich innerHTML- propery der für jeden Namen in der Liste und animieren sie mit (fadeIn, Verzögerung für x sec, fadeOut)

<div id="welcomeBox">Welcome SOMETHING</div> 

var list = ["George","Bob","Tom"]; 

$.each(list, function() 
{ 
    $("#welcomeBox") 
     .eq(0) 
     .text('Welcome' + this) 
     .fadeToggle(1500) 
     .delay(5000) 
     .fadeToggle(1500); 
}); 

Mit Code ändern möchten oben bekomme ich nur 3x Willkommen Tom Nachricht.

Answer 1

var list=["George","Bob","Tom"]; 

// recursive closure to iterate thru list 
(function recurse(index){ 
    // on fade use the callback to fade out 
    $("#welcomeBox").text('Welcome ' + list[index]).fadeIn(1500, function(){ 
     $("#welcomeBox").fadeOut(1500, function(){ 
      // after fade out, call the function again with the next index 
      recurse(undefined !== list[index+1] ? index+1 : 0); 
     }); 
    }); 
})(0); 

https://jsfiddle.net/6qo0L6mr/