IE8不透明度在png透明上设置动画

Question

I try to animate the opacity of a div which have a .png background.

<div id="image" style="background:url('background.css') repeat-x";></div>

For that, I use this code :

$("#image").stop().animate({
    opacity: 1
    }, 1000, "easeInOutSine", function() {

    $("#image").stop().animate({
        opacity: 0
        }, 1000, "easeInOutSine");

});

It's ok for recent browsers. But in IE 7 and 8, the transparence is black... I looked for a solution but none works. Someone can help me?

Thanks

Answer 1

IE8 and earlier have really really bad support for opacity.

The support they do have for it is non-standard and full of bugs. You can't use the standard opacity style for them at all; they have to use the non-standard filter style, and it's not good. Doing stuff like animating it is never going to work well, if you can get it working at all.

The best advice I can give is to just accept that these are old browsers and don't support modern features like this. Provide a fallback for them that doesn't involve animating it.

Answer 2

I wrote this since its hard to find a good solution. This one detects lower than IE9 and fixes all images that you want to animate (with opacity).

/* 
1. Include jQuery , for example 1.8.3.
2. Give the images class 'fixIE8'.
3. Save an full transparent image named 'trans.png'. */


function fixIE8() {
        $(".fixIE8").each(function(){

        var imageWidth  = $(this).width();
        var imageHeight = $(this).height();
        var imageSource = $(this).attr('src');
        var imageStyle  = $(this).attr('style');

        $(this).attr('width', imageWidth);
        $(this).attr('height', imageHeight);
        $(this).attr('src', 'trans.png');
        $(this).attr('style', ''+imageStyle+' background: transparent; background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+imageSource+'"); }');

        })
    }

    function IEversion() {

        var userHeader = navigator.userAgent;

        if (userHeader.indexOf('MSIE') !== -1) {
            var MSIE            = userHeader.indexOf('MSIE');
            var versionAt       = MSIE + 5;
            var browserVersion  = userHeader.charAt(versionAt);
            return browserVersion;
        }
    }

    $(document).ready(function(){
        if (IEversion() < 9) { fixIE8(); }
    })