jquery .png 교차 페이드 스크립트가 IE7/IE8에서 실패합니다.

두 개의 알파 -24 투명한 .png 파일을 서로 교차 페이드 (crossfade)하려고합니다. 나는 꽤 괜찮은 약간의 스크립트를 (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 웹킷에서 작동하도록했다. 이제 문제는 내가 여기서 다루는 문제에 봉착한다는 것입니다. [stackoverflow.com/questions/1156985, IE7 및 IE8]는 한 번에 하나의 이미지에 대해서만 투명도를 처리 할 수 있습니다. 크로스 페이드는 효과가있는 동안이나 그 이후에 회색으로 표시된 이미지의 결과를 제공합니다. 확인해보십시오. http://dap-llc.com/work/

누구든지이 문제를 해결할 수있는 좋은 방법이 있습니까? 그리고 컨테이너 요소가 희미해질 것이라고 제안 할 필요가 없습니다. IE의 이미지 레벨에서이를 수행 할 수있는 방법이 있어야합니다.

출처

2009-12-30 staypuftman