jQuery fadeOut without display none?

Question

Is there an alternative to fadeOut() that doesn\'t use display:none for the style? I\'d like to just use visibility hidden to avoid any sort of shifting in the page layout?

Answer 1

One way of doing this is to capture the display mode, then .fadeOut, and in the complete, do your preferred method of hiding, and set the display back to what it was:

var $element = $('#selector');

var display = $element.css('display');
$element.fadeOut(500, function() {
   $element.css('visibility', 'hidden'); 
   $element.css('display', display);
}