phpstudy集成环境

 首页 > IE下半透明图片fadeOut()或是fadeIn()会先变黑再变换透明度

IE下半透明图片fadeOut()或是fadeIn()会先变黑再变换透明度

万恶的IE，用jQuery时IE下半透明图片fadeOut()或是fadeIn()会先变黑然后再变换透明度，不知怎么解决，求高手

2014.02.21补充说明

经过实践，找到了一种可以在ie8下实现淡入淡出的动画方式，具体的原理就是如果我们使用的是div包括img的方式布置元素，通常我们会在div上加上filter,但是在ie8下，这样相当于在在div和img身上加了双重效果。而且滤镜本身就是加载了图片路径的，所以简单的说，就是在IE8下，只需要给div加上滤镜，img标签可以隐藏掉。这样就可以实现淡入淡出的效果。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(".a").css({"opacity":"0"});
        $(".a").animate({
            opacity:1
        },1000,'ease-in-out')
    });
</script>
<style type="text/css">
    body{
        padding: 0;
        margin: 0;
        background: #ccc;
    }
    img{
        width: 100%;
        height: auto;
    }
    .a{
        width: 30%;
        background: transparent;
        -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=logo.png,sizingMethod='scale');"
    }
    .lt-ie9 .normal{
        visibility: hidden;
    }

</style>
</head>

<body>
    <div class="a">
        <img class="normal" src="logo.png" alt="">
    </div>
</body>
</html>

之前的回答

IE8不支持opacity的属性，所以需要借助filter来完成淡入淡出的效果。

图片通过background插入

这个时候，给元素加上如下代码：

background: url(about:blank);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img/smart-white-2x.png', sizingMethod='scale'); // src插入相对应图片
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img/smart-white-2x.png', sizingMethod='scale')" // src插入相对应图片

就可以正常实现淡入淡出的效果。

img元素做动画

但是元素还是会有“火烧”的效果，原因是元素没有背景颜色。

当元素背景是纯色的时候，可以在自身添加:

background: #fff; // 和背景相同的颜色

然后给自身或者其父级元素做动画就会正常实现淡入淡出的效果。

当元素背景不是纯色的时候，添加:

background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
zoom: 1;

这个时候，只能在其父容器身上做动画，如果在自身元素身上做动画，背景会出现黑色填充。

去除动画

最稳妥的做法，就是去掉IE8下面的淡入淡出动画，在元素身上添加:

filter:none !important;

在我的认知中是解决不了的。。因为你是Png图片。而却用了透明滤镜~（JQ渐变透明是用的滤镜）~

【热门文章】
【热门文章】