title: jquery .png crossfade script fails on IE7/IE8
body: <p>Im trying to get two alpha-24 transparent .png files to crossfade into each other.  I started this adventure by modifying a pretty decent little script (thanks to jqueryfordesigners.com):</p>
  
  <pre><code>// wrap as a jQuery plugin and pass jQuery in to our anoymous function
      (function ($) {
          $.fn.cross = function (options) {
              return this.each(function (i) { 
                  // 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('&lt;span style="position: relative;"&gt;&lt;/span&gt;')
                      // change selector to parent - i.e. newly created span
                      .parent()
                      // prepend a new image inside the span
                      .prepend('&lt;img&gt;')
                      // change the selector to the newly created image
                      .find(':first-child')
                      // set the image to the target
                      .attr('src', target);
  
                  // the CSS styling of the start image needs to be handled
                  // differently for different browsers
                  if ($.browser.mozilla) {
                      $$.css({
                          'position' : 'absolute', 
                          'left' : 0,
                          'background' : '',
                          'top' : this.offsetTop
                      });
                   } else if ($.browser.msie &amp;&amp; $.browser.version == 8.0) {
                   $$.css({ 
                    'position' : 'absolute',
                    'left' : 0,
                    'background' : '',
                    '-ms-background-position-x' : '0px',
              '-ms-background-position-y' : '0px'
                   });
  
                  } else if ($.browser.msie) {
                      $$.css({
                          'position' : 'absolute', 
                          'left' : 0,
                          'background' : '',
                          'top' : 0
                      }); 
  
                  } else if ($.browser.opera &amp;&amp; $.browser.version &lt; 9.5) {
                      // Browser sniffing is bad - however opera &lt; 9.5 has a render bug 
                      // so this is required to get around it we can't apply the 'top' : 0 
                      // separately because Mozilla strips the style set originally somehow...                    
                      $$.css({
                          'position' : 'absolute', 
                          'left' : 0,
                          'background' : '',
                          'top' : "0"
                      });
                  } else { // Safari &amp; Chrome
                      $$.css({
                          'position' : 'absolute', 
                          'left' : 0,
                          'background' : ''
                      });
                  }
  
                  // 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
                      }, 250);
                  });
              });
          };
  
      })(jQuery);
  
      // note that this uses the .bind('load') on the window object, rather than $(document).ready() 
      // because .ready() fires before the images have loaded, but we need to fire *after* because
      // our code relies on the dimensions of the images already in place.
      $(window).bind('load', function () {
          $('img.fade').cross();
      });
  </code></pre>
  
  <p>The main modifications I made were to make it work in IE7/8 and webkit by fixing some absolute positioning bugs.  Only problem now is that I run into an issue covered here - [stackoverflow.com/questions/1156985, IE7 and IE8] can only handle transparency on one image at a time.  The crossfade gives me the result of a grayed out image during and after the effect.  Check it out in action: <a href="http://dap-llc.com/work/" rel="nofollow noreferrer">http://dap-llc.com/work/</a></p>
  
  <p>Anyone have a good way to get around this?  And no points for suggesting that I fade a container element - there has to be a way to do this on the image level in IE.</p>