title: jQuery background image rotation script - looking to modify
body: <p>I'm using this nice little jQuery script to rotate a background image:</p>
  
  <p><a href="http://www.diplo.co.uk/blog/2011/2/23/simple-jquery-background-image-rotator.aspx" rel="nofollow">http://www.diplo.co.uk/blog/2011/2/23/simple-jquery-background-image-rotator.aspx</a></p>
  
  <p>The jQuery in question is here:</p>
  
  <pre><code>(function($)
  {
      $.fn.extend({
          bgrotate: function(options)
          {
              var defaults = {
                  delay: 1000,
                  images: [],
                  imagedir: "/images/"
              }
  
              var o = $.extend(defaults, options);
              var $obj = $(this);
              var cache = [];
              var i = 0;
              var preCache = true;
  
              return this.each(function()
              {
                  setInterval(function() { setBack($obj, o.images, o.imagedir) }, o.delay);
              });
  
              function setBack(elem, backgrounds, imagedir)
              {
                  elem.css("background-image", "url(" + imagedir + backgrounds[i] + ")");
                  i++;
                  if (i == backgrounds.length)
                  {
                      i = 0;
                      preCache = false;
                  }
                  if (preCache)
                  {
                      var cacheImage = document.createElement('img');
                      cacheImage.src = imagedir + backgrounds[i];
                      cache.push(cacheImage);
                  }
              }
          }
      });
  })(jQuery);
  </code></pre>
  
  <p>This works great, but I'm trying to add a fade between image rotation.</p>
  
  <p>Any pointers or clues as to how / where a fading element might be added to this script?</p>
  
  <p>Many thanks
  Dave</p>