jQuery fadeIn（）的TR剪辑背景

Question

如果我执行更改表格尺寸的fadeIn（），Firefox会剪切新显示的行的背景。

如果我单击焦点远离选项卡，然后单击返回，则会恢复背景。

Chrome中没有剪辑问题。我在Firefox 26上

请参阅JSFiddle

JS

$(function () {
    $(".small-link").on("click", function (event) {
        $(".showfields").fadeIn(250);
    });
});

CSS

.head {
    background-color: green;
    color:white;
}
.hidden {
    display:none;
}
.small-link {
    cursor:pointer;
}
table {
    border:1px solid red;
}

HTML

<table>
    <tr>
        <td><a class="small-link">Click this</a>
        </td>
    </tr>
    <tr class="hidden showfields">
        <td>........................................</td>
    </tr>
    <tr class="head hidden showfields">
        <th>Table Head</th>
    </tr>
</table>

注意：

1. 只是展示TR的作品，但如果我能
，我想淡出它
2. 淡化TH和TD而不是解决这个简单案例的问题，但不能为我的实际代码工作

Answer 1

不确定这是否是一个FF错误但您可以使用.fadeTo（）代替.fadeIn（）来解决它。

$(".showfields").fadeTo(250,.99);

<强> jsFiddle example

Answer 2

将背景应用于th元素，而不是tr：

.head th{
    background-color: green;
    color:white;
}

LIVING DEMO