jQuery fadeOut sans afficher aucun?

Est-il une alternative à fadeOut() qui n'utilise pas de display:none pour le style? Je voudrais juste utiliser visibilité caché afin d'éviter toute sorte de décalage dans la mise en page?

InformationsquelleAutor Kyle Rogers | 2010-12-28
  1. 113

    Vous pouvez utiliser .animate() sur le opacity directement:

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

    De cette façon l'élément occupe encore l'espace comme vous le souhaitez, il a juste un 0 opacité, il est donc efficacement le visibility: hidden quand il se termine.

    • L'utilisateur peut cliquer sur l'élément (par exemple un lien), bien que, dans ce cas, vous souhaiterez peut-être définir visibility: hidden; dans le rappel de fin de fonction ou quelque chose comme ça.
    • Je veux cacher l'élément sans réglage de l'affichage à aucun. Additinaly je ne veux pas l'élément de l'espace, il semble laid si il n'y a rien sur la page, mais l'espace est tout de même réservé...
    • c'est précisément le comportement d'affichage:aucun, pour... Si vous parliez à l'instant cacher vous ne voulez pas, alors vous êtes après .fadeOut() qui n'display:none après un effet de fondu.
    InformationsquelleAutor Nick Craver
  2. 66

    Oui, il existe une alternative. Il est appelé .fadeTo(), où vous définissez la cible d'opacité, qui, dans votre cas sera 0.

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

    Cela ne changera pas la display bien à la fin.

    • Ce n'est pas ajouter display:none lorsque la décoloration à 0, mais si vous avez fondu pour une valeur supérieure à 0 alors il force un display:block (au moins quand vous avez display:none). Donc il n'a en effet de modifier la propriété d'affichage dans certaines circonstances. J'ai eu à utiliser animate() pour éviter cela.
    • Mais que faire si je veux cacher l'élément, afin de ne pas occuper l'espace dans le document (display none). Et tout cela sans réglage de l'affichage à aucun.
    • Cela fonctionnait très bien, juste eu à ajouter à la fois la décoloration à montrer et à la décoloration à cacher. $('#msgInfo').fadeTo(0, 500); $('#msgInfo').fadeTo(2000, 0);
    InformationsquelleAutor user113716
  3. 2

    Animation personnalisée est une alternative
    http://api.jquery.com/animate/

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

    Une façon de le faire est de capturer le mode d'affichage, puis .fadeOut, et dans la, faire de votre méthode préférée de la clandestinité, et de régler l'affichage à ce qu'il était:

    var $element = $('#selector');

var display = $element.css('display');
$element.fadeOut(500, function() {
   $element.css('visibility', 'hidden'); 
   $element.css('display', display);
}
    InformationsquelleAutor friggle
  5. 2

    Je veux que vous fadeOut, puis modifier le contenu et puis fadeIn de nouveau:

    $("#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

});
    • Merci!!!!! ce fut vraiment m'aider +1
    InformationsquelleAutor jobima
  6. 0

    Noter que 

    fadeTo(500, 0)   //fade out over half a second
fadeTo(0, 0)     //instantly hide

    est (bizarrement) pas compatible avec 

    fadeIn()

    (si vous souhaitez montrer à nouveau). Donc, si vous utilisez

    fadeTo(500, 0)

    afin de cacher quelque chose sans le css display: none ensuite, vous devez utiliser

    fadeTo(500, 1)

    à s'estomper, il ou elle devra toujours opacity: 0 gauche partout dans le css et restent invisibles.

    InformationsquelleAutor Simon_Weaver