Early DOM elements not hiding when using effects with jQuery UI

Question

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.

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).

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).

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.)

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>

Twisty · Accepted Answer · 2018-07-05 21:18:33Z

The thing is that .hide() expects things to be visible and I think it's making them visible to then clip them.

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>

Collectives™ on Stack Overflow

Early DOM elements not hiding when using effects with jQuery UI

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related