title: Fade out, update by AJAX, fade in a div using Prototype
body: <p>I have a div whose contents I want to update by AJAX. To make the transition smooth, I'd like to fade out the old contents, then update it with the AJAX response, then fade it back in.</p>
  
  <p>My first attempt is as follows; but of course the AJAX can complete before the <code>fade()</code> call, resulting in <code>appear()</code> not firing properly and the end-state being faded out. How can I make this work as I want?</p>
  
  <pre><code>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()}
            });
  </code></pre>
  
  <p><strong>Edit:</strong> For completeness, I'm using Prototype with script.aculo.us</p>