June 19, 2010
In jQuery, can you fadeOut() without losing the element's real estate? (invisible vs display: none)
Question by 動靜能量
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 by ckramer
Two techniques come to mind:
- Wrap the element in a div which occupies the correct amount of space.
- 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%.
Answer by Starx
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.
