javascript - jQuery 显示/隐藏列表中的每个元素

Question

问题是我想更改列表中每个名称的innerHTML属性并使用(fadeIn,delay for 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);
});

使用上面的代码，我只收到 3 条欢迎 Tom 消息。

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/