jQuery的显示/隐藏在列表

Question

每个元件的问题是，我想改变的innerHTML的属性格式对于在列表中的每个名称和动画处理（淡入，延迟对于x秒，淡出）

<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); 
}); 

随着代码以上我只是得到3x欢迎汤姆消息。

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/