jQuery fadeToggle 使行背景颜色消失

Question

这是 Firefox 独有的问题。这在 Chrome 和 Internet Explorer 上运行良好。

如果表格行上有 background-color，然后使用 fadeToggle 隐藏该行，然后再次显示它，填充的背景颜色会恢复为默认值。

我把它困在这个JSFiddle ，只有一个链接执行单行的 fadeToggle。

切换前

切换后

HTML

<a href="#" id="toggle">Toggle</a>
<table class="">
    <tr class="cat1">
        <td>data1</td><td>data2</td>
    </tr>
</table>

CSS

body {background-color: #ccc}
table {border-collapse: collapse; background-color: #fff}
td {border: 1px solid black; padding: 10px;}
tr.cat1 {background-color: #ddd;}

jQuery

$(document).ready(function() {
    $('#toggle').click(function () { 
        $('tr.cat1').fadeToggle('fast');
    });
});

我发现的事情:

• 如果您切换标签然后再切换回来，那么背景颜色会自行修复
• 如果您删除 border-collapse: collapse 那么问题就会消失
• jQuery hide 然后 show 工作正常

那么是否有可能让 fadeToggle 在 Firefox 中正常工作？

Answer 1

这个 1 对你有用:- WORKING DEMO

$('#toggle').click(function () {
      $('tr.cat1 td').fadeToggle();
});