本篇教程介绍了jQuery教程 IE中使用jQuery的fadeIn()失效的问题如何解决，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<

在自己写的一个轮播组件中遇到一个问题，使用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的效果！

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

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！