title: Jquery photo array easy fade
body: <p>I have a div with multiple background-images.  I also have a script to change those images every X seconds.  I just want to add a simple fade transition, instead of the instant change I get with this script alone.  Can I just add a simple line of code to make this work?  Your help is greatly appreciated.  I am a beginner!  Heres the script:</p>
  
  <pre><code>&lt;script  type="text/javascript"&gt;
  var now = 0;
  var int = self.setInterval("changeBG()", 2000);
  var array = ["jar1.jpg", "field.jpg",];
  
  function changeBG(){
      //array of backgrounds
      now = (now+1) % array.length ;
      $('#maincontent').css('background-image', 'url("photos/' + array[now] + '")');
  
  }
  &lt;/script&gt;
  </code></pre>