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

Answer 1

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

$('#fade').on("click", function(){
    $(this).fadeTo(500, 0, function(){
        $(this).css("visibility", "hidden")
    }) // duration, opacity, callback
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#" id="fade">Click to Fade</a>
<div>This won't move</div>

Answer 2

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.

Answer 3

Just Overwrite the property in the call back

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