In jQuery, can you fadeOut() without losing the element's real estate? (invisible vs display: none)

Question

Because I need to fadeIn() another element of the same size back in, is there a way to fadeOut() the element so that the space is kept, so that the other elements are not re-flowed for a split second and then the fadeIn() will bring back another element with the same size?

Heald

Answer 1

Two techniques come to mind:

1. Wrap the element in a div which occupies the correct amount of space.
2. Use the .animate method to change the opacity of the item from 100% to 0%, then, when the animation completes, swap the new element in and once again use animate to change the opacity from 0% to 100%.

Veinstone

Answer 2

my suggestion is you wrap it with div... and put the same dimension on that div...

Alarmist

Answer 3

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

Eadmund

Answer 4

I have made my own fix. Before I run the fadeOut, I run this function:

    /**
     * Keep the window height, to avoid user being thrown up (i.e. on fade out, remove, hide, etc)
     */

        function keepHeight() {
            $('body').css('min-height', $(document).height());
        }

So for instance:

/**
 * Keep window height
 */

    keepHeight();

/**
 * Fade out
 */

    $('#someDiv').fadeOut();

Pileate