アニメーションが私の学習では、コールバック

Question

前に終了しないのはなぜ私は常に学んだし、このようにjQueryでコールバック理解している：現在のアニメーション（効果）が終了した後、

コールバック関数が実行されます。

[...]アニメーションでは、アニメーションが終了していなくても次のコード行を実行できます。これによりエラーが発生する可能性があります。 これを防ぐには、コールバック関数を作成します。コールバック関数は、アニメーションが終了するまで呼び出されません。 ^{引用：www.w3schools.com[...]}

と

コールバックは、別の関数の引数として渡され、その親関数が完了した後に実行される機能です。 ^{引用：www.jquery.com[...]}

しかし私コールバックの使用が何らかの理由で動作しません。次のコードで

ルック：

$(page).slideUp("slow", function() { 

    $('div#details').html(details); 
    $(page).slideDown("slow");    

}); 

これはcontentboxスライドアップを行うため、消えるはずです、そしてコンテンツが新しいものに変更され、最後にcontentboxは再び（表示されます）滑り落ちます。私はこれらの3つのステップがこの順序でお互いに起こることが必要ですが、各ステップは、前のステップが終了したときに始める必要があります。そのため、私はコールバックを使うのではなく、次のようにします：

$(page).slideUp("slow"); 

$('div#details').html(details); 

$(page).slideDown("slow"); 

これは、すべてが同時に起こるようにします。

私のコードは機能し、ボタンのクリックでページのコンテンツを移動できます。しかし、アニメーションは私がこれから期待したように反応しません。ボタンがクリックされると、コンテンツはアニメーション化されたスライドアップなしで直ちに消えます。新しいコンテンツは、次に、細かいアニメーションでslideDownします。

Click around the left sidemenu here, to see what happends.

何のアニメーションslideUpが存在しない理由を私は理解していないが、私はそれが思ったようにコールバックが作用しない疑いがあります。アニメーションが終了するまで待機するのではなく、最初のアニメーションが開始されるときにコールバックが起動するようです。それとも、まったく動作しないスライドアップだけでしょうか？

コールバックを含むこの非常に単純なコードではわかりませんが、誰も私に説明することはできますか？

Answer 1

あなたの前のコードだけslideUpの完了時のdiv #detailsを更新

$(page).slideUp("slow", function() { 

    $('div#details').html(details); 
    $(page).slideDown("slow"); 
}); 

コールバックでslideDownを入れてください。

Answer 2

回避策として、遅延機能を使用できます。

$(page).slideUp(500); 
$('div#details').html(details); 
$(page).delay(500).slideDown(500);