In jQuery, can you fadeOut () without losing a real estate item? (invisible against display: no)

Question

Since I need fadeIn () to return another element of the same size again, is there a way for fadeOut () of the element to keep space so that other elements do not repeat for a second of a second and then fadeIn () will return another element with the same size ?

Answer 1

Two methods come to mind:

• Wrap the element in a div that occupies the correct space.
• Use . animate to change the opacity of the element from 100% to 0%, then when the animation is complete, replace the new in element and use the animation again to change the opacity from 0% to 100%.

Answer 2

My suggestion is that you end it with a div ... and set the same dimension in that div ...

Answer 3

Save the element that you want to fade inside the fixed <div style="display:block;width:300px;height:200px;"> , and then if you hide the element inside it, it will not affect the layout at all.

Answer 4

I made my own decision. Before running fadeOut, I ran this function:

  /** * Keep the window height, to avoid user being thrown up (ie on fade out, remove, hide, etc) */ function keepHeight() { $('body').css('min-height', $(document).height()); } 

So for example:

 /** * Keep window height */ keepHeight(); /** * Fade out */ $('#someDiv').fadeOut();