在自己写的一个轮播组件中遇到一个问题,使用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()失效的问题的更多相关文章

  1. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  2. jsp中的jquery失效以及引入js失败的问题

    这段时间在试着看公司用的框架是怎么写的,看到项目中对jquery进一步封装的这一部分,所以自己试着写一些demo来模仿框架中的用法. 再一次的,又遇到了一个问题,jsp中引入js的问题,好久没有自己从 ...

  3. Angular中引入Bootstrap部分样式失效以及Jquery的$无法识别

    大多数同学在模仿慕课网的时候可能会遇到引入bootstrap和jquery样式部分失效以及$符号报错,这里为大家提供正确的解决方案. 可能大家在引入试过col-md之后觉得bootstrap是ok的, ...

  4. [转]iOS Safari 中click点击事件失效的解决办法

    iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...

  5. 第86节:Java中的JQuery基础

    第86节:Java中的JQuery 前言复习 定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display ...

  6. 浏览器console中加入jquery,测试选择元素

    一.chrome浏览器F12打开调试界面,在console中输入(firefox同样可以): var jquery = document.createElement('script'); jquery ...

  7. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  8. IE7中使用Jquery动态操作name问题

    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...

  9. 关于angularjs中的jQuery

    关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...

随机推荐

  1. 深入运用js

    1,eval()函数 这个函数是获取参数的字符串,并将其作为js来处理,所以这里就有可能有人用这个来搞破坏(比如注入JS脚本文件等),所以最好的是方法是尽量少用,或者可以用new function() ...

  2. 窗口 - dialog - 概述与基本使用

    什么是dialog 对话框是一种特殊的窗口,它在顶部有一个工具栏,在底部有一个按钮栏.默认情况下,对话框(dialog)只有一个显示在头部右侧的关闭工具. 用户可以配置对话框行为来显示其他工具(比如: ...

  3. ListView实现原理

    转载:http://blog.csdn.net/guolin_blog/article/details/44996879 在Android所有常用的原生控件当中,用法最复杂的应该就是ListView了 ...

  4. 在SharePoint列表中使用自增栏

    问:sps2010里能不能新建个栏,数字型的,自动加一 答:在SharePoint里,有很多方法可以实现一个自增栏.在这里,我将介绍其中两种方式. 1.计算栏 2.列表项事件接收器 1.采用计算栏来实 ...

  5. keytool命令记录

    1.生成服务器端私钥kserver.keystore文件 2.根据私钥,导出服务器端安全证书 3.将服务器端证书,导入到客户端的Trust KeyStore中 4.生成客户端私钥kclient.key ...

  6. noi题库(noi.openjudge.cn) 1.8编程基础之多维数组T11——T20

    T11 图像旋转 描述 输入一个n行m列的黑白图像,将它顺时针旋转90度后输出. 输入 第一行包含两个整数n和m,表示图像包含像素点的行数和列数.1 <= n <= 100,1 <= ...

  7. 我这样理解js里的this

    关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会遇到 this 的问题(虽然一些类库会帮我们处理),例如在使用一些框架的时候,例如:k ...

  8. favicon.ico文件简介

    本地调试时,控制台经常会打印如下的错误(对 favicon.ico 的请求在 chrome 调试面板下不可见,可在抓包工具,比如 Fiddler 中看到): favicon.ico 是啥?看下面这张图 ...

  9. Debian8修改启动默认运行级别

    Two things you need to know: 1) Systemd boots towards the target given by "default.target" ...

  10. 备忘:hibernate, logback, slf4j实际应用一例

    用hibernate写一些简单的数据库的Java应用.主要是温习一下.之前弄过的一些都忘了.发现还是得记下来,不然很快就忘. 1. Eclipse版本,用Juno, J2EE版本.最好下载zip版本的 ...