jQuery fadeOut without display none?

Question

You can use .animate() on the opacity directly:

$(".selector").animate({ opacity: 0 })

This way the element still occupies space like you want, it just has a 0 opacity, so it's effectively the same as it being visibility: hidden when it finishes.

Yes, there's an alternative. It's called .fadeTo(), where you set the target opacity, which in your case will be 0.

$('element').fadeTo( 1000, 0 ); // fade to "0" with a 1000ms duration

This will not alter the display property at the end.

Custom animation is an alternative http://api.jquery.com/animate/

.animate({opacity: 0.0}, 5000, 'linear', callback);

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);
}

I you want to fadeOut, then change the content and then fadeIn again:

$("#layer").animate({opacity: 0}, 1000, 'linear', function(){

    //Do here any changes to the content (text, colors, etc.)
    $("#layer").css('background-color','red'); //For example

    $("#layer").animate({opacity: 1}); //FadeIn again

});