點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

筆記：IE下jquery的fadeIn與fadeOut方法失效的BUG

來源：懂視網責編：小采時間：2020-11-27 20:17:35

筆記：IE下jquery的fadeIn與fadeOut方法失效的BUG

筆記：IE下jquery的fadeIn與fadeOut方法失效的BUG:BUG1:絕對定位嵌套絕對定位這個問題遇到過好多次，因為沒有做筆記，所以每次遇到這個問題都要研究半天。好記性不如爛筆頭，這話一點沒錯。<p id="show_list"> <p class="" val="0">

推薦度：

點擊下載本文 文檔為doc格式

導讀筆記：IE下jquery的fadeIn與fadeOut方法失效的BUG:BUG1:絕對定位嵌套絕對定位這個問題遇到過好多次，因為沒有做筆記，所以每次遇到這個問題都要研究半天。好記性不如爛筆頭，這話一點沒錯。<p id="show_list"> <p class="" val="0">

BUG1:絕對定位嵌套絕對定位

這個問題遇到過好多次，因為沒有做筆記，所以每次遇到這個問題都要研究半天。好記性不如爛筆頭，這話一點沒錯。

<p id="show_list">
 <p class="" val="0">
 <p class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></p> 
 <p 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>
 </p>
 </p>

　　　　<p class="" val="0">
 <p class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></p> 
 <p 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>
 </p>
 </p>

<p>

posab 是絕對定位的class

只要把絕對定位換成浮動，就可以實現淡隱淡出的效果了。

<p id="show_list">
 <p class="posab" val="0">
 <p class="" style="margin-top:50px; float:left; margin-left:260px"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></p> 
 <p 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>
 </p>
 </p> 

　　　　<p class="posab" val="0">
 <p class="" style="margin-top:50px; margin-left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></p> 
 <p 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>
 </p>
 </p> 

<p>

具體的位置需要做一些調整

BUG2：父級絕對定位嵌套大于父級尺寸的圖片

還有一種情況，是IE8獨有的BUG，格式如下

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

如果圖片的大小超過了p的大小，在IE8下面淡隱淡出效果將會失效

BUG3:

網上還差了一種bug，具體沒有遇到過，現也貼上：

IE6 IE7 IE8 在 position : relative 時fadeIn() fadeOut() bug 解決方案

先看一個例子

<p class="fadein">
 <p>
 <p>I am going to fade in ;</p>
 <p>I am going to fade in ;</p>
 </p>
</p>
$('.fadein').fadeIn();

以上代碼基本上在所有主流瀏覽器都可以達到預期效果

但是現實是殘酷的，大家的html結構當然不會這么簡單。

我們再加一點東東

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

<p class="fadein">
 <p class="relative">
 <p>I am going to fade in ;</p>
 <p>I am going to fade in ;</p>
 </p>
</p>
$('.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 的問題就都解決了

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

筆記：IE下jquery的fadeIn與fadeOut方法失效的BUG

推薦度：

點擊下載本文 文檔為doc格式

標簽：失效 IE out

熱門焦點

筆記：IE下jquery的fadeIn與fadeOut方法失效的BUG

筆記：IE下jquery的fadeIn與fadeOut方法失效的BUG

IE6 IE7 IE8 在 position : relative 時fadeIn() fadeOut() bug 解決方案

可能的曲線解決方法：

針對性解決辦法

筆記：IE下jquery的fadeIn與fadeOut方法失效的BUG

最新推薦

猜你喜歡

熱門推薦