使用jQuery fadeIn显示容器时，原本隐藏的表格行被意外展示

这个问题我之前也碰到过，核心原因是当父元素处于display: none状态时，浏览器不会计算子元素的样式规则；当你调用fadeIn()将父元素显示出来时，浏览器会重新渲染子元素，但有时候会出现子元素的默认样式（比如<tr>的display: table-row）优先于你设置的display: none规则生效的情况，或者是CSS选择器的优先级不够导致规则被覆盖。

下面是几个可行的解决方案：

方案1：提升CSS选择器优先级 #

修改你的CSS规则，让#tierIIResources的选择器更具体，确保它的display: none能稳定生效：

#resources #resourceGrid #tierIIResources {
  display: none;
}
div#resources {
  display: none;
}

更具体的选择器拥有更高优先级，能覆盖任何可能的默认样式或其他低优先级规则。

方案2：在fadeIn回调中强制隐藏目标行 #

如果调整CSS优先级后还是有问题，可以在fadeIn动画完成的回调函数里手动隐藏目标行，利用行内样式的高优先级确保元素被隐藏：

$('#resources').fadeIn(function() {
  // 动画完成后强制隐藏tierIIResources行
  $('#tierIIResources').hide();
});

hide()方法会直接给元素添加style="display: none;"，优先级远高于外部CSS规则，能彻底解决意外显示的问题。

方案3：排查其他代码干扰 #

最后，你可以检查页面中是否有其他JavaScript代码，在父元素显示时（比如通过事件监听、其他动画回调）修改了#tierIIResources的显示状态，这也可能导致它意外展示。

内容的提问来源于stack exchange，提问作者Ryan Schaefer