jQuery的回调函数触发循环前的最后一行

Question

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

点击here查看我的意思的时间样本。

这是我的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

函数的第一行执行.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/

Answer 2

这是因为它与$（ '＃味精'）开始淡入（2000，（）的函数，所以它在过去的内容变淡您应该结合$。 （“#msg”）。淡入（2000，（）函数与第二行（还没有测试它）

Answer 3

问题是与你的函数的#msg

的最后一个动作的内容衰落的开始的功能是将#msg设置为“多用途”，并且你的功能的开始是淡入内容。 e开始你的函数集#msg，然后淡入。

Answer 4

我感觉大方......

var index = 0; 
var words = [ 
    { text: "Sustainable", color: "#3AE44E" }, 
    { text: "Eye Catching", color: "#F18D0B" }, 
    { text: "Modern Design", color: "#0B8DF1" }, 
    { text: "Energy Efficient", color: "#AD0BF1" }, 
    { text: "Restaurant", color: "#F10B0B" }, 
    { text: "Retail & Pop-Up", color: "#C39813" }, 
    { text: "Event Space", color: "#4FB186" }, 
    { text: "Bar & Lounge", color: "#F10BA3" }, 
    { text: "Residential", color: "#C7C7C7" }, 
    { text: "Hotel & Lodging", color: "#565457" }, 
    { text: "Multi-Purpose", color: "#F1880B" }]; 

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

wordfade(); 

Working jsFiddle...