jQuery fadeOut不能在IE9中工作

在2天后幾乎放棄... .fadeOut（）與jQuery 1.7.1 + IE9不能在<tr>元素上工作。任何人都可以確認這是否是已知問題？適用於FF和Chrome。jQuery fadeOut不能在IE9中工作

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">google.load("jquery", "1.7.1");</script> 
<script type="text/javascript"> 
$("document").ready(function() { 
    $("a.delete").click(function() { 
     $(this).parent().parent().fadeOut(); 
     return false; 
    }); 
}); 
</script> 
<style> 
    a, td { background-color: #ececec; padding: 5px; } 
</style> 
</head> 
<body> 

    <table> 
    <tr><td><a class="delete" href="#">delete</a></td><td>apple</td></tr> 
    <tr><td><a class="delete" href="#">delete</a></td><td>orange</td></tr> 
    <tr><td><a class="delete" href="#">delete</a></td><td>pear</td></tr> 
    </table> 
</body> 
</html>

編輯：下面的這個更新後的代碼將揭示有關該問題的更多信息。我發現，如果你的鼠標移動從<tr>離開後點擊<tr>將淡出正確即更新其風格

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">google.load("jquery", "1.7.1");</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("a.delete").click(function() { 
     $(this).parent().parent().fadeOut(); 
     return false; 
    }); 

    $("a.show").click(function() { 
     $("tr").fadeIn(); 
    }) 

    $("a.delete-tr").click(function() { 
     $("tr").each(function(i, e) { 
      if($(e).css("display") != "none") { 
       $(e).fadeOut(); 
       return false; 
      } 
     }); 
    }) 
}); 
</script> 
<style> 
    table { background-color: red; } 
    a, td { background-color: #ececec; padding: 5px; } 
</style> 
</head> 
<body> 
    <p><a class="show" href="#">show</a></p> 
    <p><a class="delete-tr" href="#">delete row</a></p> 

    <table> 
    <tr><td><a class="delete" href="#">delete</a></td><td>apple</td></tr> 
    <tr><td><a class="delete" href="#">delete</a></td><td>orange</td></tr> 
    <tr><td><a class="delete" href="#">delete</a></td><td>pear</td></tr> 
    </table> 
</body> 
</html>

來源

2012-03-02 Jake

可能重複的[jQuery：FadeOUt不能使用錶行]（http://stackoverflow.com/questions/944110/jquery-fadeout-not-working-with-table-rows） – j08691 2012-03-02 04:10:51

這是張貼2009年和我讀一些* fadeIn（）*在JQuery 1.6中修復的地方，所以我不得不承認fadeOut（）也被修復了。因此重新確認（總是在別人之前責怪自己）。無論如何，我提供了我的編輯代碼，以更好地揭示這個問題的IE怪異。 – Jake 2012-03-02 04:33:01

我現在只使用不透明黑客。希望這不會因爲之前的文章而關閉。這個有更好的問題和答案，我覺得... – Jake 2012-03-02 05:03:15

至於原因，我不明白（與IE錶行的怪癖，我猜），該的<tr>將起作用，如果你最初使用CSS規則將其設置爲0.99不透明度。你可以看到它在IE9在這裏工作：

http://jsfiddle.net/jfriend00/ZMunQ/

這顯然是一個黑客/變通，但似乎工作。

我的猜測是jQuery使用不透明度設置的過濾器（舊版IE需要）和過濾器對子對象的影響不同於標準不透明度。

這裏的另一種變通辦法（少的hackish，早先的變通），其在IE9工作（淡出TD標籤而不是和隱藏TR以漸弱的結尾）：

$("document").ready(function() { 
    $("a.delete").click(function() { 
     var once = false; 
     var tr$ = $(this).closest('tr'); 
     tr$.find('td').fadeOut(function() { 
      if (!once) { 
       tr$.hide(); 
       once = true; 
      } 
     }); 
     return false; 
    }); 
});

你可以在這裏看到它的動作：http://jsfiddle.net/jfriend00/ZMunQ/8/

來源

2012-03-02 04:11:29 jfriend00

Friggin'IE .... – Purag 2012-03-02 04:15:19

但是..我有一個'''background-color' ... – Jake 2012-03-02 04:40:12

我發現如果在點擊''後你的鼠標離開''，將會正確地淡出，即更新它的風格。 – Jake 2012-03-02 04:46:02

我剛碰到這個bug，找到了我自己的解決方案。

jQuery假定寬度和高度爲0的任何元素都已隱藏，因此不會嘗試用淡出來「隱藏」它。

查看「：hidden」的選擇器規範以查看它隱藏的內容。

現在，爲什麼它在Firefox和Chrome中工作是一個不同的問題，但可能與您正在做的事情有關。我通過檢查包含在其中的IMG文件的尺寸來動態設置我的DIV的寬度和高度。我在元素上使用了直接的.width和.height屬性，這些屬性可以在Firefox和Chrome中使用，但IE可能不會爲圖像設置這些屬性，而對於IE，我的迴歸爲0.因此，我的DIV的大小是0x0，因此「隱藏」在jQuery的腦海裏。

「正確」的方法是使用jQuery的.width（）和.height（）方法。 jQuery將爲該瀏覽器找出正確的選擇。

來源

2012-09-04 19:50:17

jQuery fadeOut不能在IE9中工作

回答

相關問題