Fading elements in and out without changing the layout of the page

Question

The normal behavior when using fadeIn and fadeOut is to use the display property. However, this changes the layout of the page.

How can I make fadeIn and fadeOut not modify the layout of the page?

Solution 1

Also

instead of .fadeIn() you can .animate({opacity:1})
and instead of .fadeOut() you can .animate({opacity:0})

Solution 2

You can try this for fadeOut:

$("something here").fadeOut("slow", function() {
    $(this).show().css({visibility: "hidden"});
});

...and this for fadeIn:

$("something here").hide().css({visibility: "visible"}).fadeIn("slow");

Solution 3

Use fadeTo:

The .fadeTo() method animates the opacity of the matched elements. It is similar to the .fadeIn() method but that method unhides the element and always fades to 100% opacity.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, the default duration of 400 milliseconds is used. Unlike the other effect methods, .fadeTo() requires that duration be explicitly specified.

If supplied, the callback is fired once the animation is complete...

Solution 4

Thanks to 10gler my solution below, using visibility to prevent invisible button click, etc.

//fadeIn
$("#x")
    .css('visibility', 'visible')
    .fadeTo('fast', 1);

//fadeOut
$("#x")
    .fadeTo('fast', 0, function() {
        $(this).css('visibility', 'hidden');
    });

View more solutions