What is the equivalent of .hide() that keeps the place in the layout ?

Question

When using .hide(), the element is no more participating in the layout of the page. But what if I want to keep its place, i.e I don't want other elements to move because this one is hidden now. How could I do this ?

Answer 1

element.css('visibility', 'hidden')

To undo:

element.css('visibility', 'visible')

Answer 2

You could try animating the opacity - something like:

$('your selector').animate({
    opacity: 0 /* 0 = hide() ; 1 = show() */
}, 700);