Implementing CSS transitions across several elements simultaneously can enhance the user experience

Question

Implementing CSS transitions across several elements simultaneously can enhance the user experience

There seems to be an issue with animating two elements simultaneously using max-height. The transition always occurs one after the other, with one element completing its transition before the other starts.

setTimeout(function () {
        $(".b").css("max-height", "500px");
    }, 500);

    setTimeout(function () {
        $(".b").css("max-height", "0");
        $(".c").css("max-height", "500px");
    }, 2000);

Click here to see this phenomenon in action on js bin

Any assistance in resolving this mystery would be greatly appreciated.

javascript html css

Answer 1

Answer №1

Hey there, do you want it to look like this? It seems like this is what you're looking for.

setTimeout(function () {
  $(".b").css("max-height", "500px");
  $(".c").css("max-height", "500px");
}, 500);


setTimeout(function () {
  $(".b").css("max-height", "0");  
}, 2000);

    .box { background: red; height: 200px; width: 200px; margin: 15px; }
    .a { height: 500px; width: 500px; background: blue; }
    
    .b, .c { max-height: 0; overflow: hidden; transition: max-height 1s; transition-delay: 0; }

  <div class="a">
    
    <div class="b">
      <div class="box"></div>
    </div>
    <div class="c">
      <div class="box"></div>
    </div>
    
  </div>

You can see the demo of this code in action by clicking on the link below:

DEMO

Answer 2

Hey there, do you want it to look like this? It seems like this is what you're looking for.

setTimeout(function () {
  $(".b").css("max-height", "500px");
  $(".c").css("max-height", "500px");
}, 500);


setTimeout(function () {
  $(".b").css("max-height", "0");  
}, 2000);

    .box { background: red; height: 200px; width: 200px; margin: 15px; }
    .a { height: 500px; width: 500px; background: blue; }
    
    .b, .c { max-height: 0; overflow: hidden; transition: max-height 1s; transition-delay: 0; }

  <div class="a">
    
    <div class="b">
      <div class="box"></div>
    </div>
    <div class="c">
      <div class="box"></div>
    </div>
    
  </div>

You can see the demo of this code in action by clicking on the link below:

DEMO

Answer 3

Answer №2

I'm not entirely sure if I've grasped the issue you're facing, but if you're looking to trigger a CSS transition for two elements simultaneously, check out this example

In essence, avoid using two separate setTimeout functions. Instead, execute both CSS transitions within a single setTimeout function like so:

setTimeout(function () {
    $(".element1").css("property", "value");
    $(".element2").css("property", "value");
}, 1000);

Revised Solution

example

HTML

<div class="container">
    <div class="element1"></div>
    <div class="element2"></div>
</div>

CSS

.container {
    height:500px;
    width:500px;
    background:blue;
}
.element1 {
    background: red;
    height: 200px;
    width: 200px;
    margin: 15px;
    transition: height 2s ease;
}
.element2{
     background: red;
    height: 10px;
    width: 200px;
    margin: 15px;
    transition: height 2s ease;
}

JavaScript

setTimeout(function () {
  $(".element1").css("height", "10");
  $(".element2").css("height", "200px");
}, 1000);


setTimeout(function () {
  $(".element1").css("height", "200");
  $(".element2").css("height", "10px");
}, 4000);

Answer 4

I'm not entirely sure if I've grasped the issue you're facing, but if you're looking to trigger a CSS transition for two elements simultaneously, check out this example

In essence, avoid using two separate setTimeout functions. Instead, execute both CSS transitions within a single setTimeout function like so:

setTimeout(function () {
    $(".element1").css("property", "value");
    $(".element2").css("property", "value");
}, 1000);

Revised Solution

example

HTML

<div class="container">
    <div class="element1"></div>
    <div class="element2"></div>
</div>

CSS

.container {
    height:500px;
    width:500px;
    background:blue;
}
.element1 {
    background: red;
    height: 200px;
    width: 200px;
    margin: 15px;
    transition: height 2s ease;
}
.element2{
     background: red;
    height: 10px;
    width: 200px;
    margin: 15px;
    transition: height 2s ease;
}

JavaScript

setTimeout(function () {
  $(".element1").css("height", "10");
  $(".element2").css("height", "200px");
}, 1000);


setTimeout(function () {
  $(".element1").css("height", "200");
  $(".element2").css("height", "10px");
}, 4000);

Implementing CSS transitions across several elements simultaneously can enhance the user experience

Answer №1

Answer №2

Similar questions

Is there a way to display list items in rows of three?

How can you leverage JavaScript's map() method to manipulate an element within an array using string functions?

Trouble with displaying label in PDF post HTML conversion using iText html2pdf

The azure streak on the mobile dropdown menu

Steps for performing a runtime cast

Methods for updating the value of a `<select>` element in an AngularJS controller

Adjusting the navigation image as it passes through various div elements during scrolling

Converting milliseconds to a valid date object using Angular form validation

Can you show me the way to open a single card?

Creating a text shadow effect with text that has a transparent color

When the route is changed, the system must execute a function to verify the authenticity of the token

What is the best way to calculate the frequency of a specific word in an array?

Different approaches to transforming jQuery code into functional AngularJS code

JavaScript functioning exclusively for specific list items within an unordered list

Do not start Chart.js on the Y-Axis

Obtaining the "match" object within a Custom Filter Selector on jQuery version 1.8

Converting Three.js camera rotation.y to a full 360 degrees rotation

`How can I dynamically alter the text color of a CSS class using code?`

Differences in jQuery selector behavior when targeting elements in parent windows compared to popup windows

Continuous Load More: Loads content infinitely until a page is fully loaded