Ausblenden, Update von AJAX, Einblenden eines Div mit Prototyp

Question

Ich habe ein Div, dessen Inhalte ich von AJAX aktualisieren möchte. Um den Übergang reibungslos zu machen, möchte ich die alten Inhalte ausblenden, dann aktualisieren Sie sie mit der AJAX-Antwort und dann wieder einblenken.

Mein erster Versuch ist wie folgt; aber natürlich kann der AJAX vor dem fade() Anruf abschließen, was dazu führt, dass appear() nicht richtig zündet und der Endzustand ausgeblendet wird. Wie kann ich das so machen, wie ich es möchte?

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

Edit: Für Vollständigkeit, ich bin mit Prototype mit script.aculo.us

Answer 1

Ich habe die Lösung gefunden, die ich wollte, obwohl die Dokumente es nicht einfach machten. Es stellt sich heraus, alle script.aculo.us Effekte haben eine set of callbacks, einschließlich afterFinish. Mein Code ist geworden:

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

meisten wartbaren Lösung war bisher mit Timer und Fahnen zu handhaben erscheinen zu sehen, ob beide verblassen und Wunsch hatte abgeschlossen.

Timer konnte mit Funktionsaufruf nach Aktualisierung und Fade geändert werden.

In beiden Fällen neigt es dazu, in Unordnung zu enden.

Answer 3

Ich denke, der bessere Ansatz ist, den AJAX-Anruf zuerst zu machen. Dann, wenn es fertig ist, verblasse das Div. Wenn die Überblendung abgeschlossen ist, ersetzen Sie den Inhalt und blenden Sie ihn wieder ein.