title: jQuery: Animate background image
body: <p>Modifying <a href="http://jsmadeeasy.com/javascripts/Background%20Effects/background_slide_show/index.htm" rel="nofollow">this</a> script, I'm able to go through background images and cycle them through the body 'background-image' property. However, I'm wanting to know if it's possible to use jQuery animate (or another method) to perform a fade transition. I've attempted to use other scripts, such as the jQuery cycle plugin, but the issue seems to be the fixed attribute. Here's what I have working so far:</p>
  
  <pre><code>&lt;style&gt;
  body{
  /*Remove below line to make bgimage NOT fixed*/
  background-image:url(/sites/default/files/bg-3.jpg);
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size:100%;
  }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  (function($){
  $(document).ready(function(){
  var bgimages=new Array()
  bgimages[0]="/sites/default/files/bg-1.jpg"
  bgimages[1]="/sites/default/files/bg-2.jpg"
  bgimages[2]="/sites/default/files/bg-3.jpg"
  
  //preload images
  var pathToImg=new Array()
  for (i=0;i&lt;bgimages.length;i++){
  pathToImg[i]=new Image()
  pathToImg[i].src=bgimages[i]
  }
  
  var inc=-1
  
  function bgSlide(){
  if (inc&lt;bgimages.length-1)
  inc++
  else
  inc=0
  $('body').css({'background-image':'url('+pathToImg[inc].src+')'});
  }
  
  setInterval(function(){
      bgSlide();
  },3000);
  
  });
  })(jQuery)
  &lt;/script&gt;
  </code></pre>