title: jquery fade in and out a background image in div - with cross fade
body: <p>Have been attempting to have a background div auto rotate through a series of images.  The fades are flashing and not crossing.  Thoughts are to use jquery to swap out the image via css and fade the new one in.  A nice crossover might be nice.  This is fairly light weight - or so it seems and would rather not use a plugin.  </p>
  
  <p>Any insight on why were not getting a smoother crossover/transition?  </p>
  
  <pre><code>    setInterval(delayFunction, 10000);
  
      function delayFunction() {
  
          setTimeout( function(){
          $('#homeback').fadeOut('slow');    
          $('#homeback').css("background-image","url(images/home_02.jpg)").fadeIn('slow');
      },5000);
  
          setTimeout( function(){
          $('#homeback').fadeOut('slow');    
          $('#homeback').css("background-image","url(images/home_03.jpg)").fadeIn('slow');
      },10000);
  
          setTimeout( function(){
          $('#homeback').fadeOut('slow');    
          $('#homeback').css("background-image","url(images/home_04.jpg)").fadeIn('slow');
      },15000);
  
          setTimeout( function(){
          $('#homeback').fadeOut('slow');    
          $('#homeback').css("background-image","url(images/home_01.jpg)").fadeIn('slow');
      },20000);
  
      };
  </code></pre>