在jQuery UI中使用效果时,早期DOM元素不会隐藏

时间:2018-07-05 13:54:22

标签: javascript jquery jquery-ui

这是我先前的问题jQuery UI hiding not taking effect for early DOM elements的后续内容。我几乎只是编辑了那个,但不想让Toffler使the accepted answer无效。我写这个问题的方式,答案在技术上并没有错,但是并不能解决我的问题。

回顾一下,我希望能够显示和隐藏div个组。我显示给定组的策略是隐藏所有组(按班级选择),然后取消隐藏我想要的组(再次按班级选择)。

第一个问题的答案是建议使用jQuery UI和核心jQuery中的hide()show() / fadeIn()。当我使用不带参数的这些函数时,隐藏功能将按预期方式工作(答案的摘录已证明)。

问题是,当我尝试重新添加一种效果类型(即the hide() function的第一个参数)时,事情又再次中断了;下面的MCVE代码段。具体来说,当隐藏并显示DOM中更下方的一组元素时,DOM中位于其上方的元素仍然可见。要从新加载的代码段进行复制,请尝试在“显示组A”之后单击“显示组B”。 (这使事情更加混乱,按第二次 正常工作,单击“显示组B”。)

我想知道这是否与jQuery UI - Dialog Hide Effect in Firefox - FlickeringjQuery UI effect causes iframe reload所涉及的引擎盖下DOM刷新行为有关,但是我没有JS印记可以告诉我自己。

是什么导致这里的基本行为?如何在仍然可以使用效果(可能还有其他参数)的情况下使其工作?

$(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>

1 个答案:

答案 0 :(得分: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;
}
<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>