在jQuery UI中使用效果时，早期DOM元素不会隐藏 [英] Early DOM elements not hiding when using effects with jQuery UI
问题描述
这是我先前的问题 jQuery UI隐藏对早期DOM元素无效，.我几乎只是编辑了那个，但是不想使Toffler的接受的答案无效.我写这个问题的方式，答案在技术上并没有错，但是并不能解决我的问题.
This is a follow-up to my earlier question jQuery UI hiding not taking effect for early DOM elements. I almost just edited that one, but didn't want to invalidate the accepted answer by toffler. The way I wrote that question, the answer isn't technically wrong, but it doesn't solve my problem.
回顾一下，我希望能够显示和隐藏div组.我显示给定组的策略是隐藏所有组(按班级选择)，然后取消隐藏我想要的组(再次按班级选择).
To recap, I want to be able to show and hide groups of divs. My strategy for showing a given group is to hide all groups (selected by class) and then un-hide the group I want (again, selected by class).
第一个问题的答案建议使用jQuery UI和核心jQuery中的hide()和show()/fadeIn().当我使用不带参数的这些函数时，隐藏功能将按预期方式工作(答案的代码段证明了这一点).
The answer to my first question suggests using hide() and show()/fadeIn() from jQuery UI and core jQuery. When I use those functions without arguments, hiding works as expected (proven by the answer's snippet).
问题是，当我尝试重新添加效果类型时(即 c1>函数)，事情再次崩溃；下面的MCVE代码段.具体来说，当隐藏并在DOM中向下显示一组元素时，在DOM中位于其上方的元素仍然可见.要从新加载的代码段进行复制，请尝试在显示组A"之后单击显示组B". (这使事情更加混乱，按第二次 正常工作，单击显示组B".)
The problem is, when I try to add an effect type back in (i.e. the first parameter of the hide() function), things break again; MCVE snippet below. Specifically, when hiding and then showing a group of elements further down in the DOM, the elements that are above it in the DOM remain visible. To repro from a freshly loaded snippet, try clicking "Show group B" after "Show group A". (Making things even more confusing, clicking "Show group B" a second time does work as expected.)
我想知道这是否与 jQuery UI效果会导致iframe重新加载，但是我没有JS印章可以告诉我自己.
I wonder if this is related to the under-the-hood DOM refreshing behavior touched on at jQuery UI - Dialog Hide Effect in Firefox - Flickering and jQuery UI effect causes iframe reload, but I don't have the JS chops to tell for myself.
是什么原因导致这里的基本行为?如何在仍然可以使用效果(可能还有其他参数)的情况下使它起作用?
What is causing the underlying behavior here, and how can I get this to work while still being able to use effects (and possibly other parameters)?
$(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;
}
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</head>
<body>
<button id="showAll">Show all</button>
<button id="showA">Show group A</button>
<button id="showB">Show group B</button>
<div id="aOne" class="box groupA">
<h4>A1</h4>
</div>
<div id="aTwo" class="box groupA">
<h4>A2</h4>
</div>
<div id="bOne" class="box groupB">
<h4>B1</h4>
</div>
<div id="bTwo" class="box groupB">
<h4>B2</h4>
</div>
</body>
</html>
推荐答案
问题是.hide()希望事物可见，并且我认为使它们可见然后进行裁剪.
The thing is that .hide() expects things to be visible and I think it's making them visible to then clip them.
因此只能隐藏可见的项目:$(".box:visible")
So lets only hide visible items: $(".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;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<div class="tools">
<button id="showAll">Show all</button>
<button id="showA">Show group A</button>
<button id="showB">Show group B</button>
</div>
<div id="aOne" class="box A">
<h4>A1</h4>
</div>
<div id="aTwo" class="box A">
<h4>A2</h4>
</div>
<div id="bOne" class="box B">
<h4>B1</h4>
</div>
<div id="bTwo" class="box B">
<h4>B2</h4>
</div>
这篇关于在jQuery UI中使用效果时，早期DOM元素不会隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
