フェードアウト、AJAXによる更新、プロトタイプを使ったdivのフェードイン

Question

私はAJAXによって内容を更新したいdivを持っています。移行をスムーズにするために、古いコンテンツをフェードアウトしてから、AJAXレスポンスで更新してから、フェードインし直してください。

私の最初の試みは次のとおりです。もちろんAJAXはfade()コールの前に完了することができ、appear()が正しく発射されず、最終状態がフェードアウトされます。私が望むようにこの作品を作るにはどうすればいいですか？

target = $('card_text_' + index); 
new Ajax.Request('/games/card_text', 
     {asynchronous:false, 
      evalScripts:true, 
      method:'get', 
      parameters:'type=' + value, 
      onCreate: function(){target.fade()}, 
      onSuccess: function(e){target.update(e.responseText).appear()} 
      }); 

編集：完全性については、私はscript.aculo.us

Answer 1

私が望む解決策を見つけましたが、文書では簡単にはできませんでした。 Script.aculo.usのエフェクトにはset of callbacks（afterFinishなど）が含まれています。私のコードは次のようになっています：

target = $('card_text_' + index); 
new Effect.Fade(target, {afterFinish: function(){ 
    new Ajax.Updater(target, '/games/card_text', 
      {asynchronous:false, 
      evalScripts:true, 
      method:'get', 
      parameters:'type=' + value,   
      onSuccess: function(e){new Effect.Appear(target)} 
      }); 

Answer 2

ほとんどunmaintainableソリューションは、これまでフェードと要求の両方が持っていたかどうかを確認するために、タイマーとフラグが表示され取り扱うようにしてプロトタイプを使用しています完了しました。

タイマは、更新とフェード後に関数呼び出しで変更することができます。

どちらの場合も、それは混乱で終了する傾向があります。

Answer 3

もっと良いアプローチは、AJAXを最初に呼び出すことです。その後、それが完了したら、divを消してください。フェードが完了したら、内容を置き換えてフェードインして戻してください。