La décoloration des éléments sans avoir à changer la mise en page de la page

Question

Le comportement normal lors de l'utilisation d' fadeIn et fadeOut est d'utiliser l' display de la propriété. Cependant, cela change la mise en page de la page.

Comment puis-je faire fadeIn et fadeOut de ne pas modifier la mise en page de la page?

Answer 1

Aussi

au lieu de .fadeIn() vous pouvez .animate({opacity:1})
et au lieu de .fadeOut() vous pouvez .animate({opacity:0})

Answer 2

Vous pouvez essayer ce pour fadeOut:

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

...et ce pour fadeIn:

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

Answer 3

Utilisation fadeTo: http://api.jquery.com/fadeTo/

Answer 4

Grâce à 10gler ma solution ci-dessous, à l'aide de la visibilité pour prévenir invisible bouton de clic, etc.

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

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

Answer 5

En utilisant une combinaison des réponses ci-dessus, cela a bien fonctionné pour moi. Vous pouvez modifier le temps d'animation à votre goût.

D' fadeIn:

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

D' fadeOut:

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

Assurez-vous de définir l' visibilty:'hidden' et opacity:0 au début pour éviter la soudaine de la pop sur la première fondu si l'affichage par défaut est caché, sinon il ne devrait pas.

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