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

JqueryCssLayout

Jquery Problem Overview

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?

Jquery Solutions

Solution 1 - Jquery

Also

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

Solution 2 - Jquery

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 - Jquery

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 - Jquery

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

Solution 5 - Jquery

Using a combination of the above answers, this worked well for me. You can change the animation time to your liking.

To fadeIn:

        $('selector').animate({opacity:1, visibility:'visible'}, 200);

To fadeOut:

        $('selector').animate({opacity:0, visibility:'hidden'}, 200);

Make sure to set the visibilty:'hidden' and opacity:0 at the start to avoid the sudden pop on the first fade in if the default display is hidden, otherwise it shouldn't matter.

        $('selector').css({opacity:0, visibility:'hidden'});
Categories
Recommended Jquery Solutions
Recommended Css Solutions
Recommended Layout Solutions

Previous Solution:

Javascript extends class

JavascriptExtends

Next Solution:

Removing a non empty directory programmatically in C or C++

C++C

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionlarsView Question on Stackoverflow
Solution 1 - JqueryGabriele PetrioliView Answer on Stackoverflow
Solution 2 - JqueryicktoofayView Answer on Stackoverflow
Solution 3 - Jquery10glerView Answer on Stackoverflow
Solution 4 - JqueryTorbjörn NomellView Answer on Stackoverflow
Solution 5 - JqueryjorView Answer on Stackoverflow