web-dev-qa-db-fra.com

Fondu à l'intérieur et à l'extérieur des éléments sans modifier la mise en page de la page

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

Comment faire pour que fadeIn et fadeOut ne modifient pas la mise en page de la page?

jquerycsslayout
60
lars

Également

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

72
Gabriele Petrioli

Vous pouvez essayer ceci pour fadeOut:

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

... et ceci pour fadeIn:

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

Utilisez fadeTo :

La méthode .fadeTo() anime l'opacité des éléments correspondants. Elle est similaire à la méthode .fadeIn() mais cette méthode masque l'élément et se fane toujours à une opacité de 100%.

Les durées sont données en millisecondes; des valeurs plus élevées indiquent des animations plus lentes, pas plus rapides. Les chaînes 'fast' et 'slow' peuvent être fournies pour indiquer des durées respectives de 200 et 600 millisecondes. Si une autre chaîne est fournie, la durée par défaut de 400 millisecondes est utilisée. Contrairement aux autres méthodes d’effet, .fadeTo() requiert que duration soit explicitement spécifié.

S'il est fourni, le rappel est déclenché une fois l'animation terminée ...

18
10gler

Merci à 10gler ma solution ci-dessous, en utilisant la visibilité pour empêcher le clic de bouton invisible, etc. 

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

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

En combinant les réponses ci-dessus, cela a bien fonctionné pour moi. Vous pouvez modifier l’heure de l’animation à votre guise.

Pour fadeIn:

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

Pour fadeOut:

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

Assurez-vous de définir visibilty:'hidden' et opacity:0 au début pour éviter l'apparition soudaine du premier fondu si l'affichage par défaut est masqué, sinon cela ne devrait pas avoir d'importance.

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