// create our transition as a plugin
$.fn.crossfade = function () {
  return this.each(function () { 
    // cache the copy of jQuery(this) - the start image
    var $$ = $(this);
    
    // get the target from the backgroundImage + regexp
    var target = $$.css('backgroundImage').replace(/^url|[\(\)]/g, '');
    
    // nice long chain: wrap img element in span
    $$.wrap('<span style="position: relative;"></span>')
      // change selector to parent - i.e. newly created span
      .parent()
      // prepend a new image inside the span
      .prepend('<img>')
      // change the selector to the newly created image
      .find(':first-child')
      // set the image to the target
      .attr('src', target);
    
    // position the original image
    $$.css({
      'position' : 'absolute', 
      'left' : 0, 
      // this.offsetTop aligns the image correctly inside the span
      'top' : this.offsetTop
    });
    
    // note: the above CSS change requires different handling for Opera and Safari,
    // see the full plugin for this.
    
    // similar effect as single image technique, except using .animate 
    // which will handle the fading up from the right opacity for us
    $$.hover(function () {
      $$.stop().animate({
          opacity: 0
      }, 250);
    }, function () {
      $$.stop().animate({
          opacity: 1
      }, 3000);
    });
  });
};

// Not only when the DOM is ready, but when the images have finished loading,
// important, but subtle difference to $(document).ready();