使用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; } 
          

A1

A2

B1

B2

问题是.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; } 
   

A1

A2

B1

B2