The .fadeOut() method to use visibility property instead of display property

Question

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page and same is for fadeIn().

My Question is can they use visibility property so they the element occupy the space in layout of the page and is not just visible?

Answer 1

Use jQuery's fadeTo() and then have a callback set the visibility. Example:

$('selector').fadeTo(500, 0, function(){
   $('selector').css("visibility", "hidden");   
}); // duration, opacity, callback

http://jsfiddle.net/7HjB6/

Answer 2

Just Overwrite the property in the call back

$('Element').on("click", function() {
    $(this).fadeOut(500, function() {
        $(this).css({"display": "block","visibility": "hidden"});  // <-- Style Overwrite 
    }); 
})​

Answer 3

animate with css opacity seems to achieve a similar effect.

$('#element').animate({opacity: 0}, 1000);

Run the same with opacity: 1 to fade back in.

Credit.