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()失效的问题的更多相关文章
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46| 分类: Easy UI|举报|字号 订阅 可以使用$.parser.pa ...
- jsp中的jquery失效以及引入js失败的问题
这段时间在试着看公司用的框架是怎么写的,看到项目中对jquery进一步封装的这一部分,所以自己试着写一些demo来模仿框架中的用法. 再一次的,又遇到了一个问题,jsp中引入js的问题,好久没有自己从 ...
- Angular中引入Bootstrap部分样式失效以及Jquery的$无法识别
大多数同学在模仿慕课网的时候可能会遇到引入bootstrap和jquery样式部分失效以及$符号报错,这里为大家提供正确的解决方案. 可能大家在引入试过col-md之后觉得bootstrap是ok的, ...
- [转]iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- 第86节:Java中的JQuery基础
第86节:Java中的JQuery 前言复习 定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display ...
- 浏览器console中加入jquery,测试选择元素
一.chrome浏览器F12打开调试界面,在console中输入(firefox同样可以): var jquery = document.createElement('script'); jquery ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
- 关于angularjs中的jQuery
关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...
随机推荐
- 深入运用js
1,eval()函数 这个函数是获取参数的字符串,并将其作为js来处理,所以这里就有可能有人用这个来搞破坏(比如注入JS脚本文件等),所以最好的是方法是尽量少用,或者可以用new function() ...
- 窗口 - dialog - 概述与基本使用
什么是dialog 对话框是一种特殊的窗口,它在顶部有一个工具栏,在底部有一个按钮栏.默认情况下,对话框(dialog)只有一个显示在头部右侧的关闭工具. 用户可以配置对话框行为来显示其他工具(比如: ...
- ListView实现原理
转载:http://blog.csdn.net/guolin_blog/article/details/44996879 在Android所有常用的原生控件当中,用法最复杂的应该就是ListView了 ...
- 在SharePoint列表中使用自增栏
问:sps2010里能不能新建个栏,数字型的,自动加一 答:在SharePoint里,有很多方法可以实现一个自增栏.在这里,我将介绍其中两种方式. 1.计算栏 2.列表项事件接收器 1.采用计算栏来实 ...
- keytool命令记录
1.生成服务器端私钥kserver.keystore文件 2.根据私钥,导出服务器端安全证书 3.将服务器端证书,导入到客户端的Trust KeyStore中 4.生成客户端私钥kclient.key ...
- noi题库(noi.openjudge.cn) 1.8编程基础之多维数组T11——T20
T11 图像旋转 描述 输入一个n行m列的黑白图像,将它顺时针旋转90度后输出. 输入 第一行包含两个整数n和m,表示图像包含像素点的行数和列数.1 <= n <= 100,1 <= ...
- 我这样理解js里的this
关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会遇到 this 的问题(虽然一些类库会帮我们处理),例如在使用一些框架的时候,例如:k ...
- favicon.ico文件简介
本地调试时,控制台经常会打印如下的错误(对 favicon.ico 的请求在 chrome 调试面板下不可见,可在抓包工具,比如 Fiddler 中看到): favicon.ico 是啥?看下面这张图 ...
- Debian8修改启动默认运行级别
Two things you need to know: 1) Systemd boots towards the target given by "default.target" ...
- 备忘:hibernate, logback, slf4j实际应用一例
用hibernate写一些简单的数据库的Java应用.主要是温习一下.之前弄过的一些都忘了.发现还是得记下来,不然很快就忘. 1. Eclipse版本,用Juno, J2EE版本.最好下载zip版本的 ...