title: How to wait until a jQuery animation has finished before calling next functions?
body: <p>I am having trouble getting my jquery function to complete, before calling the next function.</p>
  
  <p>Essentially, I am trying to get my news articles to fade out, and finish all the fadeout animations before then retrieving the next page of articles via ajax.</p>
  
  <p>Heres what I have (Sampled to include only the functions concerned).</p>
  
  <p>A function to control the fading out of each news article...</p>
  
  <pre><code>function fadeArticlesOut() {
      var delay = 0;
      //set timeout for image to appear (set at 500ms)
      $('#news-articles article').each(function(index) {
          $(this).delay(delay).fadeTo(800, 0);
          delay += 400;       
      })
  };          
  </code></pre>
  
  <p>A function which is triggered by clicking a pagination link. This captures the url to load via ajax, but before it does so, this is where I want to run the fadeout function, i.e fadeArticlesOut.  What I want is for the fade out animations to have finished before running the loadProducts function.</p>
  
  <pre><code>function doPager() {
      $('.pagination-controls a').click(function(e) {
          e.preventDefault();
  
          fadeArticlesOut();          
          loadProducts($(this).attr('href'));
          history.pushState(null, null, $(this).attr('href'));
          historyedited = true;
      });
  }
  
  function loadProducts(url) {
      $('#news-articles').empty().addClass('loading').load(url + ' #news-articles-inner', function() {
          $('#news-articles').removeClass('loading');
          doPager();
          fadeArticlesIn();
      });
  }
  </code></pre>
  
  <p>Once completed, the load products function will then fade in the new news articles.</p>
  
  <p>So far, I have tried numerous methods including using a custom callback, deferred objects and setting timeouts. The issue I have is I can either get it to run the fadeouts, but then not continue with the ajax content load, or not have the fadeouts, but get the ajax content.</p>