jQueryコールバック関数の問題

Question

jQuery/Javascriptのプログラミングに少し慣れていて、divタグ（コンテナ）に一連のヘッダーを表示/非表示する問題があります。試みたコールバックとスクリプトコードされています。私は基本的に、その後フェードインとフェードアウトしてテキスト2をdesplay、それはその後、フェードアウト、フェードインとTesxt1ヘッダーをdislayしたい

$(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); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
}); 

。 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にそれにあなたを与える、最初の配列要素にアニメーションを始めます（Promisesを使用して）完了すると完了し、アニメーションの最後の「フレーム」に達するまで各nextStepを再帰的に呼び出すようにします。