jquery回调函数在循环之前触发最后一行

Question

我正在尝试创建一个循环我的单词动画的回调函数.我创建了一个jquery函数,用一种颜色淡入和淡出每个单词.我希望这个小动画能够正确循环.问题是,一旦我回调函数它不会从头开始,它会再次重复最后一个代码.所以在这个例子中,你会看到关键词多用途两次.

点击这里查看我的意思的时间样本.

这是我的jquery代码:

function wordfade(){
        $('#msg').fadeIn(2000, function() {
            $('#msg').html("Sustainable").css("color", "#3AE44E").delay(800).fadeOut(2000, function() {
                $('#msg').fadeIn(2000).html("Eye Catching").css("color", "#F18D0B").delay(800).fadeOut(2000, function(){
                    $('#msg').fadeIn(2000).html("Modern Design").css("color", "#0B8DF1").delay(800).fadeOut(2000, function(){
                        $('#msg').fadeIn(2000).html("Energy Efficient").css("color", "#AD0BF1").delay(800).fadeOut(2000, function(){
                            $('#msg').fadeIn(2000).html("Restaurant").css("color", "#F10B0B").delay(800).fadeOut(2000, function(){
                                $('#msg').fadeIn(2000).html("Retail & Pop-Up").css("color", "#C39813").delay(800).fadeOut(2000, function(){
                                    $('#msg').fadeIn(2000).html("Event Space").css("color", "#4FB186").delay(800).fadeOut(2000, function(){
                                        $('#msg').fadeIn(2000).html("Bar & Lounge").css("color", "#F10BA3").delay(800).fadeOut(2000, function(){
                                            $('#msg').fadeIn(2000).html("Residential").css("color", "#C7C7C7").delay(800).fadeOut(2000, function(){
                                                $('#msg').fadeIn(2000).html("Hotel & Lodging").css("color", "#565457").delay(800).fadeOut(2000, function(){
                                                    $('#msg').fadeIn(2000).html("Multi-Purpose").css("color", "#F1880B").delay(800).fadeOut(2000, wordfade);
                                                })
                                            })
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            })
        });
    }
    wordfade();

Answer 1

函数的第一行执行a .fadeIn()并等到完成后再设置.html()下一行.所以它第二次消失,而html内容仍然是最后一个字.只需将前两行组合起来就像其他行一样,它会起作用:

function wordfade() {
    $('#msg').fadeIn(2000).html("Sustainable").css("color", "#3AE44E").delay(800).fadeOut(2000, function () {
        $('#msg').fadeIn(2000).html("Eye Catching").css("color", "#F18D0B").delay(800).fadeOut(2000, function () {
         // etc.

演示:http://jsfiddle.net/PNDg4/

然后考虑重写整个事情以避免这么多嵌套回调:

var words = [
    { word : "Sustainable", color : "#3AE44E" },
    { word : "Eye Catching", color : "#F18D0B" },
    { word : "Modern Design", color : "#0B8DF1" },
    { word : "Energy Efficient", color : "#AD0BF1" },
    /* etc */],
    current = -1;

function wordfade() {
    current = (current + 1) % words.length;
    $("#msg").html(words[current].word)
             .css("color", words[current].color)
             .fadeIn(2000)
             .delay(800)
             .fadeOut(2000, wordfade);
}
wordfade();

演示:http://jsfiddle.net/PNDg4/1/