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

问题

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?

回答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/

回答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 
    }); 
})​

回答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.

来源：https://stackoverflow.com/questions/12171371/the-fadeout-method-to-use-visibility-property-instead-of-display-property