title: jQuery AJAX - Do Stuff in Success or Complete callbacks?
body: <p>I have a quick question about jQuery's AJAX function.</p>
  
  <p>The way I do my ajax calls I do something along the lines of:</p>
  
  <pre><code>$.ajax({
      type: "GET",
      url: "/wordpress/wp-admin/admin-ajax.php",
      dataType: 'html',
      data: ({ action: 'loadHomePage'}),
      beforeSend: function() {
          document.getElementById('loading').style.visibility = 'visible';
      },
      complete: function(){
          FB.Canvas.setAutoGrow(false);
          FB.Canvas.setSize({height:600});
          setTimeout(function(){
              FB.Canvas.setAutoGrow(true);
          }, 100);
      },
      success: function(data){
          data = $.trim(data);
          $('#ajax-content').hide().empty().fadeIn('slow').html(data);
          FB.Canvas.scrollTo(0,0);                
      }
  });
  </code></pre>
  
  <p>The trouble is, in this particular instance, it's a full website inside a facebook iframe that uses ajax for the page navigation, when navigating between pages it seems to fade the content in multiple times so I was wondering what the best practise was here for the fade in part - should it go in the complete part?</p>
  
  <p>I had the resizing stuff originally in complete but having moved it I think it's made a difference but not sure if it's a placebo effect....</p>
  
  <p>If so, do I achieve it by doing the following:</p>
  
  <pre><code>complete: function(data){
      // fade in etc
  </code></pre>
  
  <p>and secondly, is it ok to do this if complete comes before success in the ordering of the source code or is the order important, e.g. success and <em>then</em> complete?</p>