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...