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中工作

回答

相关问题