首页 > 代码库 > IE中使用jquery的fadeIn()失效的问题
IE中使用jquery的fadeIn()失效的问题
在自己写的一个轮播组件中遇到一个问题,使用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>声明样式实现布局。
IE中使用jquery的fadeIn()失效的问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。