title: On click, display a div, wait a second, load some ajax, wait a second, and hide it all?
body: <p>I have a function which when clicked shows a div, then waits a second, calls some ajax, shows the result, then waits a second, then hides again...</p>
  
  <p>It all seems to be working, except for the hide part at the end.</p>
  
  <p>My code looks like this:</p>
  
  <pre><code>  $('#wrap').slideDown('fast').delay(1000,function(){
  
    $.ajax({
      type: 'POST',
      url: '/stuff.php',
      cache: false,
      success: function(data) {
  
        $('#wrap').show().delay(1000,function(){
  
          $('#wrap').fadeOut('slow'); 
  
        });
  
      }
    });
  </code></pre>
  
  <p>});</p>
  
  <p>What am I missing here? It seems pretty straightforward that in the line:  </p>
  
  <pre><code>$('#wrap').show().delay(1000,function() { ///// }
  </code></pre>
  
  <p>The callback function to hide the #wrap should run. Why doesn't it?</p>
  
  <p>In addition to this, I'm looking for a bit of a mechanical style animation where by the slideDown occurs, then a second later, the ajax is executed... then the fadeout... but it all seems to happen all at once even though I have those delay() functions in there. I've tried to mess around with the queue() function but it seems to evade my inferior brain.</p>