Fade out adjacent elements if currently visible using jQuery

Question

Fade out adjacent elements if currently visible using jQuery

Currently, I am attempting to devise a method to target all siblings and gradually fade them out before fading in the specific element that is being targeted.

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

Even though the :visible selector should work in theory, it doesn't seem to be functioning properly. The main issue arises when the complete event triggers immediately due to some siblings already being hidden.

I believe there must be a straightforward solution for this problem, but perhaps I have been gazing at it for too long and missing a simple detail.

jquery css fadein fadeout

Answer 1

Answer №1

Let's experiment with a new strategy for this problem. It seems that the "complete" event is only triggering once in this scenario.

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

Answer 2

Let's experiment with a new strategy for this problem. It seems that the "complete" event is only triggering once in this scenario.

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

Fade out adjacent elements if currently visible using jQuery

Answer №1

Similar questions

Update the knockout values prior to submitting them to the server

how to position one div above another using css

Tips on how to toggle/close a dropdown menu that is displayed on a different page using Vue

Unable to detect any errors in the CSS file

Display the icon exclusively when hovered over

Preventing page reload using JavaScript function

Using JavaScript regular expressions for email validation criteria

Adding Custom CSS File to an iFrame in Angular

Verify the accuracy of the color value on a web page using Selenium in Java

What allows me to modify the border color and thickness of my table's <thead>, but prohibits me from changing the background color?

Stop unauthorized access to JSON Web Service

different ways to dynamically increase CSS ID in PHP

Guide to effectively utilizing addEventListener for images

Increase the size of the Bootstrap select input area to exceed the dimensions of

Adding a class name to the three active, visible, and shown slides in SwiperJS is a simple process that can be done by

Ways to stop a named anchor from causing a line break

``When you click, the image vanishes into thin

My JavaScript code is functioning properly in jsfiddle, but when I try to run it on my own website, I encounter

The issue with additional parameters not functioning in jQuery autocomplete

An unexpected character caused an error during JSON Response processing