jquery .png交叉淡入淡出脚本在IE7/IE8上失败

我试图让两个alpha-24透明.png文件交叉淡入对方。我通过修改一个相当不错的小脚本（感谢jqueryfordesigners.com）开始这次冒险：jquery .png交叉淡入淡出脚本在IE7/IE8上失败

// 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('<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); 

       // 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 && $.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 && $.browser.version < 9.5) { 
        // Browser sniffing is bad - however opera < 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 & 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(); 
    });

我所做的主要改进是使其在IE7/8和WebKit通过固定一些绝对定位的错误工作。现在唯一的问题是我遇到了一个这里涉及的问题 - [stackoverflow.com/questions/1156985，IE7和IE8]一次只能处理一张图片的透明度。交叉淡入淡出效果给出了效果期间和结束后灰显图像的结果。检查它的行动：http://dap-llc.com/work/

任何人都有一个很好的方法来解决这个问题？并没有建议我淡化容器元素的要点 - 必须有一种方法可以在IE中的图像级别上执行此操作。

来源

2009-12-30 staypuftman