Javascript 在jqueryui中使用effects时不隐藏早期DOM元素

这是我先前问题的后续行动。我几乎刚刚编辑了这篇文章，但不想被托夫勒否定。我写这个问题的方式，从技术上来说，答案并没有错，但它并不能解决我的问题

总而言之，我希望能够显示和隐藏

div

s的组。我显示给定组的策略是隐藏所有组（按类选择），然后取消隐藏我想要的组（同样，按类选择）

我的第一个问题的答案建议使用jQuery UI和核心jQuery中的

hide（）

和

show（）

/

fadeIn（）

。当我在没有参数的情况下使用这些函数时，隐藏工作正如预期的那样（答案片段证明了这一点）

问题是，当我尝试重新添加一个效果类型（即的第一个参数）时，情况再次中断；下面是MCVE代码片段。具体地说，当在DOM中隐藏并显示更下方的一组元素时，DOM中位于其上方的元素仍然可见。若要从新加载的代码段重新编译，请尝试单击“显示组a”之后的“显示组B”。（第二次单击“显示组B”会让事情变得更加混乱，但效果与预期一样。）

我不知道这是否与在和中提到的幕后DOM刷新行为有关，但我没有JS印章来告诉自己

是什么导致了这里的底层行为，我如何在仍然能够使用效果（以及可能的其他参数）的情况下使其工作

$（函数（）{
$（“#showAll”）。在（“单击”，函数（）{
$（'.box'）.fadeIn（）；
});
$（“#showA”）。在（“单击”，函数（）{
$（'.box'）.hide（'clip'）；
$（'.groupA'）.fadeIn（）；
});
$（“#showB”）。在（“单击”，函数（）{
$（'.box'）.hide（'clip'）；
$（'.groupB'）.fadeIn（）；
});
});
.box{
边框：1px纯黑；
}

全部展示
表演A组
B组
A1
A2
地下一层
地下二层
问题是，
.hide（）
希望事物可见，我认为它使它们可见，然后剪辑它们

因此，让我们只隐藏可见项：
$（“.box:visible”）


$（函数（）{
$（“.tools”按钮）。单击（函数（e）{
e、 预防默认值（）；
var btn=$（本）；
$（“.box:可见”）.hide（“剪辑”，函数（）{
交换机（btn.attr（“id”））{
案例“showAll”：
$（“.box”）.show（）；
打破
案例“昭和”：
$（“.A”）.show（）；
打破
案例“showB”：
$（“.B”）.show（）；
打破
}
});
});
});
.box{
边框：1px纯黑；
}

全部展示
表演A组
B组
A1
A2
地下一层
地下二层