jQuery回調函數問題

Question

我在jQuery/Javascript中編程有點新，並且在div標記（容器）中顯示/隱藏了一系列標題時出現了一些問題。企圖回調腳本代碼是：

$(document).ready(function(){ 
    $('<h1>Text1</h1>').hide().prependTo("#container").fadeIn(2000, function(){ 
     $("#container h1").fadeOut(2000, function(){ 
      $('<h1>Text2</h1>').hide().prependTo("#container").fadeIn(2000, function(){ 
       $("#container h1").fadeOut(2000, function(){ 
        $('<h1>Text3</h1>').hide().prependTo("#container").fadeIn(2000, function(){ 
         $("#container h1").fadeOut(2000, function(){ 
          $('<h1>Text4</h1>').hide().prependTo("#container").fadeIn(2000); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
}); 

我基本上希望它dislay Tesxt1頭有淡入，淡出，然後，然後用淡入淡出和文本2 desplay。 Text4是最後一個，應該只有一個沒有淡出的淡入淡出。如果沒有回調函數，一切都會同時執行，並且當它們在上面添加（錯誤地）時，以後的文本會被多次前置。

非常感謝您的時間。

Answer 1

首先添加和隱藏您的元素，然後爲它們設置動畫。

jsFiddle

$(document).ready(function(){ 
    var text1 = $('<h1>Text1</h1>').hide().prependTo("#container"); 
    var text2 = $('<h1>Text2</h1>').hide().prependTo("#container"); 
    var text3 = $('<h1>Text3</h1>').hide().prependTo("#container"); 
    var text4 = $('<h1>Text4</h1>').hide().prependTo("#container"); 
    text1.fadeIn(2000, function(){ 
     text1.fadeOut(2000, function(){ 
      text2.fadeIn(2000, function(){ 
       text2.fadeOut(2000, function(){ 
        text3.fadeIn(2000, function(){ 
         text3.fadeOut(2000, function(){ 
          text4.fadeIn(2000); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
}); 

Answer 2

以下是我認爲一個更清潔，更容易維護，更可擴展的解決方案：http://jsfiddle.net/Akkuma/8GAN8/

您開始第一個數組元素的動畫，給它的NeXTSTEP的你一旦它完成（通過使用Promise）就完成了，然後讓每個nextStep遞歸地調用它自己，直到你到達動畫的最後一個「幀」。