jQuery fadeOut siblings if visible

248 Views Asked by dcolumbus At 06 November 2025 at 19:44

I'm trying to figure out how to target all siblings and fade them out, before fading in the element that's being targeted.

$('#MyDiv').siblings(':visible').not('h2').fadeOut('slow', function() {
    $('#MyDiv').fadeIn('slow');
});

The :visible selector isn't working, but in theory it should, right? The issue is the complete event is being run immediately because there are some siblings that are already hidden.

This should be a simple solution for someone ... I think I've been staring at this for too long and I'm missing something simple.

Original Q&A

There are 1 best solutions below

abigperson On 29 December 2016 at 20:21

OK - Maybe try a different approach? In this instance the "complete" only fires once.

$('#div3').fadeOut(500);
$('#div1').fadeOut(500);

setTimeout(function() {
  $('#div1').siblings(':visible').not('h2')
    .fadeOut(500).promise().done(
      function() {
        $('#div1').fadeIn();
      }
    );
}, 1500);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div id="div1">
    <p>Div1</p>
  </div>
  <div id="div2">
    <p>Div2</p>
  </div>
  <h2>H2</h2>
  <div id="div3">
    <p>Div3</p>
  </div>
  <div id="div4">
    <p>Div4</p>
  </div>

  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>

</html>

jQuery fadeOut siblings if visible

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in CSS

Related Questions in FADEIN

Related Questions in FADEOUT

Trending Questions

Popular # Hahtags

Popular Questions