Question

我有一张桌子，我分为两部分<thead>和<tbody>。 <thead>一直显示在页面上，而<tbody>设置为“display:none”，点击按钮时会加载一些内容。

用于加载<tbody>我正在使用“Jquery：.fadeIn（）”方法。下面是代码：

$(document).ready(function () {
    $("#btn").click(function () {
        $( ".applicationTable tbody" ).fadeIn( "slow" );
    });
});

问题是，在Firefox和Chrome上，<tbody>平滑加载有淡化效果，就像IE（我正在检查IE11）一样，它的闪烁。

以下是完整代码的小提琴（HTML CSS和Jquery）：http://jsfiddle.net/9Bpry/1/

请在所有3个浏览器“Chrome，Firefox和IE”中查看这个小提琴，看看其中的区别。

请建议我该如何解决这个问题。

谢谢！

Answer 1

让我在大约2 - 3年前分享一些测试。

我在以前的IE版本（IE7及以下版本，不确定IE8）上测试了类似的东西（尝试使用jQuery下载/上拉'tr'）我可以告诉你，在IE下，不可能有这样的效果表

您可以在IE以外的所有浏览器中使用该效果，并使用show / hide进行IE浏览，或者您可以使用div-s进行标记，然后您可以获得所需的所有效果（注意：如果您有所有效果，可能会非常棘手）每行不同的背景和/或细胞中有不同的图像。）

让我再说一遍 - 它对旧的IE版本进行了很好的测试并且无法正常工作，但是如果其他人有过去IE版本的经验，那么你可以省略我的答案（请记住，如果你需要浏览器兼容性。）

Answer 2

您的问题源于IE对表格及其子标记的有限样式选项。没有任何数量的jQuerying将是100％

我会建议这个结构：

<table>
    <tbody>
        <tr>
            <td style="display:none;">something</td>
        </tr>
    </tbody>
</table>

然后：

$(document).ready(function () {
    $("#btn").click(function () {
        $( ".applicationTable tbody td" ).fadeIn( "slow" );
    });
});