IE中使用jquery的fadeIn()失效的问题

Posted 2020-08-23 ZhangCui

在自己写的一个轮播组件中遇到一个问题，使用jquery的fadeIn动画时，在IE11中表现不正常，没有渐入的效果。

1、html结构

<div class="mainpage-slideshow-top outerbox">
    <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img1.jpg" alt="爆品提前抢 最高减1500元"></a>
    <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img2.jpg" alt="乐Max2 购机送乐视会员"></a>
    <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img3.jpg" alt="潮饰国际范 满199减100"></a>
    <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img4.jpg" alt="OPPO新品上市 预售好礼专享"></a>
    <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img5.jpg" alt="12.12狂欢 满5000减300"></a>
    <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img6.jpg" alt="时尚腕表 大牌直降千元"></a>
    <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img7.jpg" alt="京东E卡 传递真情 表达心意"></a>
    <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img8.jpg" alt="小米新品 拍照黑科技"></a>
</div>

2、CSS

.mainpage-slideshow{
    float: left;
    width: 790px;
    height: 480px;
    margin-left: 10px;
}

//使用jq添加的样式
$(".outerbox img").css({
    position: ‘absolute‘,
    left:‘0‘,
    top:‘0‘
});

3、jquery

$(".outerbox >a").stop(true,true).eq(index).fadeIn(600).siblings(‘a‘).hide(400);

4、渐入渐出的效果在firefox，chrome中均正常，但是在IE11中无法出现渐入的效果。fadeIn是由opacity来实现的，IE11肯定是支持opacity的。

5、最后把目光放在了CSS上。我这里是<a>标签里嵌套<img>，这里并没有说明<a>的样式，会不会是这里的问题？

6、修改CSS样式，将$(".outerbox img")修改为$(".outerbox >a")后，问题得到解决，IE11也能正常显示渐入渐出了。

7、根据网上资料，这个问题类似于

如果fadeIn的元素的子元素有position属性时 以relative值为最严重 有position属性的元素不会出现fadeIn的效果！

https://my.oschina.net/noxiaomi/blog/195257

 8、所以在以后遇到<a>标签里嵌套单个<img>并需要实现动画效果时，最好不要对img使用绝对定位进行布局，可通过对<a>声明样式实现布局。