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();
});