title: How to get first content to fade completely out before next content fades in?
body: <p>I cant figure out how to get the first content to fade completely out before the next content fades in. Here is a js fiddle and what you will see is "content 2" box fades in before the "content 1" box fades completely out. Is there a way to have "content 1" fade completely out before "content 2" fades in, and then "content 3"?</p>
  
  <p><a href="http://jsfiddle.net/m2Sm7/1/" rel="nofollow">http://jsfiddle.net/m2Sm7/1/</a></p>
  
  <p>Thanks for any help!</p>
  
  <p>Here is the JS also:</p>
  
  <pre><code>function startSlider(){ 
  
  // timer 
  var loop = 0; 
  
  // get total boxes 
  var count=$('.count .company').length; 
  
  // slide index 
  var sliderIndex = 0; 
  
  // info boxes 
  var infoboxes = $("#about_cont").find(".count"); 
  
  function resetSlider() { 
      window.clearInterval(loop); 
      moveSlider(); 
      loop=window.setInterval(moveSlider, 2000); 
  } 
  
  function moveSlider() { 
      if(sliderIndex == count){ //will reset to first image when last image fades out 
          sliderIndex = 0; 
      } 
      infoboxes.fadeOut(1000); 
      infoboxes.eq(sliderIndex).fadeIn(1000); // slider image + the next image in the slider 
  
      sliderIndex++; 
  } 
  
  resetSlider(); 
  } 
  
  $(function() { 
      startSlider(); 
  });
  </code></pre>