文档章节

IE下jquery的fadeIn与fadeOut方法失效的BUG

糯小米
 糯小米
发布于 2014/01/23 12:50
字数 1041
阅读 2489
收藏 13

BUG1:绝对定位嵌套绝对定位

这个问题遇到过好多次,因为没有做笔记,所以每次遇到这个问题都要研究半天。好记性不如烂笔头,这话一点没错。

<div id="show_list">
      <div class=""  val="0">
           <div class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>  
           <div  class="posab alce"  style="top:200px; width:260px; left:80px;">
                <p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">测试测试测试</p>
                <p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
                <p class="lk444 f14  l22 alce" style="margin-top:5px;">测试测试测试</p>
           </div>
       </div>
    <div class=""  val="0">
           <div class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>  
           <div  class="posab alce"  style="top:200px; width:260px; left:80px;">
                <p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">测试测试测试</p>
                <p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
                <p class="lk444 f14  l22 alce" style="margin-top:5px;">测试测试测试</p>
           </div>
       </div>
<div>

posab  是绝对定位的class

只要把绝对定位换成浮动,就可以实现淡隐淡出的效果了。

<div id="show_list">
      <div class="posab"  val="0">
           <div class="" style="margin-top:50px; float:left; margin-left:260px"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>  
           <div  class="alce"  style="margin-top:-200px; width:260px; margin-left:80px; float:left">
                <p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">测试测试测试</p>
                <p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
                <p class="lk444 f14  l22 alce" style="margin-top:5px;">测试测试测试</p>
           </div>
       </div>       

    <div class="posab"  val="0">
           <div class="" style="margin-top:50px; margin-left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>  
           <div  class="alce"  style="margin-top:-200px; width:260px; margin-left:80px;float:left">
                <p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;float:left">测试测试测试</p>
                <p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
                <p class="lk444 f14  l22 alce" style="margin-top:5px;">测试测试测试</p>
           </div>
       </div>       

<div>

 具体的位置需要做一些调整

BUG2:父级绝对定位嵌套大于父级尺寸的图片

还有一种情况,是IE8独有的BUG,格式如下

 <div class=" posab" style=" top:80px; left:260px;width:550px;height:55px">
  <img class="png_bg" src="image.jpg" />
</div>

 如果图片的大小超过了div的大小,在IE8下面淡隐淡出效果将会失效

BUG3:

网上还差了一种bug,具体没有遇到过,现也贴上:

IE6 IE7 IE8 在 position : relative 时fadeIn() fadeOut() bug 解决方案

先看一个例子
<div class="fadein">
    <div>
        <div>I am going to fade in ;</div>
        <div>I am going to fade in ;</div>
    </div>
</div>
$('.fadein').fadeIn();

 

以上代码基本上在所有主流浏览器都可以达到预期效果

但是现实是残酷的, 大家的html结构当然不会这么简单。

我们再加一点东东

<style>
.relative{position: relative;}
</style>
<div class="fadein">
    <div class="relative">
        <div>I am going to fade in ;</div>
        <div>I am going to fade in ;</div>
    </div>
</div>
$('.fadein').fadeIn();

这个时候在IE 6 78 就会吭爹的事情出现, 动画不出现有木有!  直接show出来有木有!

这是臭名昭著的 IE 大bug: 如果fadeIn的元素的子元素有position属性时 以relative值为最严重 有position属性的元素不会出现fadeIn的效果!

可能的曲线解决方法:

1, 不用position: relative;  这个嘛 有时候可以做到

2,如果1实在做不到, 比如笔者遇到的情况,那就用each()。 你可以一个一个做这个效果, 这个当然是可以做到的, 不过效率太差, 搞不好会挂掉用户的电脑,比如笔者遇到的情况,有几十个上百个子元素 这个方法是万万使不得滴。。

针对性解决办法

我们要在使用position:relative 而且不使用each()的情况下达到这个效果,可以吗?

可以!

既然这是一个bug 那一定就有hack的方法

$('.fadein').css('position', 'relative').fadeIn();

在fadeIn()之前动态的将其position属性改为relative; 会解决IE7下的这个bug

<style>
.relative{position: relative; filter: inherit}
</style>

在你子元素有position属性的元素加 filter: inherit; 当前元素的第一层子元素也要加。
这两条一结合 IE678 的问题就都解决了


© 著作权归作者所有

糯小米
粉丝 0
博文 8
码字总数 1538
作品 0
桂林
私信 提问
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu
2018/06/18
67
0
Jquery工作常用实例——淡入淡出功能实现

首先说下几个事件的用法: 1:$(selector).fadeOut(speed,callback)):淡出被选元素; 2:$(selector).fadeIn(speed,callback): 淡入被选元素; 3:$(selector).fadeTo(speed,opacity(亮度)...

Adam-Lee
2011/07/12
475
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0
jquery自带的已定义动画函数

我们的网页如果一直是那种静态不动的,就显得有点太安静了。所以,我们一般会在页面上添加一些动画动态效果,让页面更加的丰富,如:选项卡、幻灯片、轮播图等等,这些动画我们都可以通过jqu...

hero2019
2018/08/08
8
0
JS/jquery实现鼠标事件控制页面元素显隐

最近因为公司网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码。像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一...

GavinHsueh
2018/05/21
545
3

没有更多内容

加载失败,请刷新页面

加载更多

sync.Mutex 互斥锁

说明: 互斥锁用来保证在任一时刻,只能有一个例程访问某对象。Mutex 的初始值为解锁状态。Mutex 通常作为其它结构体的匿名字段使用,使该结构体具有 Lock 和 Unlock 方法。Mutex 可...

李琼涛
18分钟前
6
0
自建redis笔记

自建redis笔记 最近在linux安装了一下redis,特做一些笔记! 本文先单节点启动redis,然后再进行持久化配置,在次基础上,再分享搭建主从模式的配置以及Sentinel 哨兵模式及集群的搭建 单节点...

北极之北
21分钟前
4
0
扛住阿里双十一高并发流量,Sentinel是怎么做到的?

Sentinel 承接了阿里巴巴近 10 年的双十一大促流量的核心场景 本文介绍阿里开源限流熔断方案Sentinel功能、原理、架构、快速入门以及相关框架比较 基本介绍 1 名词解释 服务限流 :当系统资源...

分布式系统架构
22分钟前
5
0
事假杨晨龙(Z16021)月薪请假单

svn co URL --username xxx-- password yyy ./

桃花飞舞
46分钟前
6
0
当Activity关闭后,网络请求回调的处理

当我们在使用网络请求的时候,一般都是通过回调来获取请求到的数据。对于网络请求的回调需要注意的几个点 比如我们的回调在Activity中处理数据,当我们把Activity关闭后,如果获取到数据时,...

shzwork
47分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部