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?

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%.