jQuery，CSS：显示后对以下DOM元素进行动画处理：无

Question

One quick question.
If I set a div to display: none , the following Elements in the DOM will jump up on the place where the div was.
How can I animate that jump, that it just moves gently up?

Thnaks in advance for each help!

Answer 1

You cannot. Instead of display: none; make it with height: 0; and transition: height .5s; overflow: hidden;

Then you will have slightly move of other divs next to others. :)

If you wanna, I can made a simple codepen.

Answer 2

Use slideUp() instead of hide(); if you use jquery

$('.hidden').slideUp();

Answer 3

Just animate it. jQuery has many ways of doing it, eg:

$('#myDiv').hide(200); // 200ms

Answer 4

To avoid to keep an hidden element with a width that could interfere with other elements on the page, you should simply:

$('yourElement').slideUp();

That way you will make the yourElement height animate and, finally, get it hidden actually removing it from the elements flow.

Edit: Thanks A. Wolff for the comment. Removed un-needed .hide() function after .slideUp() .

Answer 5

Got even a better solution for you. You can show and hide the blue box with every time you click on the pink box.

 $('.pinkBox').click(function() { $('.pinkBox').addClass('show'); $('.blueBox').addClass('displayed'); }); $('.blueBox').click(function() { $('.pinkBox').removeClass('show'); setTimeout(function() { $('.blueBox').removeClass('displayed'); }, 300); }); 

 .blueBox { height: 100px; width: 100px; background-color: blue; transition: all .3s ease; position: absolute; display: none; } .pinkBox { height: 100px; width: 100px; background-color: pink; transition: all .3s ease; position: absolute; } .show { transform: translateY(100px); } .displayed { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='blueBox'> </div> <div class='pinkBox'> </div>