0

我尝试为具有 .png 背景的 div 的不透明度设置动画。

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

为此，我使用以下代码：

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

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

});

对于最近的浏览器来说没问题。但是在 IE 7 和 8 中，透明度是黑色的......我寻找了一个解决方案，但没有一个有效。有人可以帮助我吗？

谢谢

4

2 回答 2

0

IE8 及更早版本对不透明度的支持非常糟糕。

他们对它的支持是非标准的并且充满了错误。您根本不能opacity为它们使用标准样式；他们必须使用非标准filter样式，这并不好。做动画之类的东西永远不会很好地工作，如果你能让它工作的话。

我能给出的最好建议就是接受这些都是旧浏览器并且不支持这样的现代功能。为他们提供不涉及动画的后备。

于 2013-09-27T16:26:37.983 回答
0

我写这篇文章是因为很难找到一个好的解决方案。这个检测低于 IE9 并修复您想要动画的所有图像（不透明度）。

/* 
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(); }
    })
于 2014-03-24T16:51:08.723 回答