使用jQuery UI效果时，早期的DOM元素不会隐藏

这是我早期的问题jQuery UI隐藏不对早期DOM元素生效的后续跟进。 我几乎只编辑了那个，但不想让toffler 接受的答案无效。 我写这个问题的方式，答案在技术上并没有错，但它并没有解决我的问题。

回顾一下，我希望能够显示和隐藏div组。 我显示给定组的策略是隐藏所有组（按类选择），然后取消隐藏我想要的组（再次，按类选择）。

我的第一个问题的答案建议使用jQuery UI和核心jQuery中的hide()和show() / fadeIn() 。 当我使用那些没有参数的函数时，隐藏按预期工作（由答案的片段certificate）。

问题是，当我尝试重新添加效果类型时（即hide()函数的第一个参数），事情再次破裂; 下面的MCVE片段。 具体来说，当隐藏然后在DOM中向下显示一组元素时，DOM中位于其上方的元素仍然可见。 要从新加载的代码段中重新生成，请在“显示组A”后单击“显示组B”。 （让事情变得更加混乱，再次单击“显示组B”可以按预期工作。）

我想知道这是否与jQuery UI触及的引擎盖下DOM刷新行为有关- Firefox中的对话隐藏效果 – 闪烁和jQuery UI效果导致iframe重新加载 ，但我没有JS chops告诉我自己。

导致这里潜在行为的原因是什么，如何在能够使用效果（以及可能的其他参数）的同时使其工作？

 $(function() { $("#showAll").on("click", function() { $('.box').fadeIn(); }); $("#showA").on("click", function() { $('.box').hide('clip'); $('.groupA').fadeIn(); }); $("#showB").on("click", function() { $('.box').hide('clip'); $('.groupB').fadeIn(); }); }); 

 .box { border: 1px solid black; } 

       Show all Show group A Show group B 
 
A1
 
 
 
A2
 
 
 
B1
 
 
 
B2
 
   

Answer 1

问题是.hide()期望事物是可见的，我认为它使它们可见然后剪辑它们。

所以我们只隐藏可见的项目： $(".box:visible")

 $(function() { $(".tools button").click(function(e) { e.preventDefault(); var btn = $(this); $(".box:visible").hide("clip", function() { switch (btn.attr("id")) { case "showAll": $(".box").show(); break; case "showA": $(".A").show(); break; case "showB": $(".B").show(); break; } }); }); }); 

 .box { border: 1px solid black; } 

   
 Show all Show group A Show group B 
 
 
A1
 
 
 
A2
 
 
 
B1
 
 
 
B2