Elementi di dissolvenza in entrata e in uscita senza modificare il layout della pagina

Question

Il comportamento normale quando si utilizza fadeIn e fadeOut utilizza the display property. Tuttavia, questo cambia il layout della pagina.

Come posso rendere fadeIn e fadeOut non modificare il layout della pagina?

Answer 1

anche

invece di .fadeIn() si può .animate({opacity:1})
invece di .fadeOut() puoi .animate({opacity:0})

Answer 2

Si può provare questo per fadeOut:

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

... e questo per fadeIn:

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

Answer 3

Uso fadeTo:

Il metodo .fadeTo() anima l'opacità degli elementi corrispondenti. È simile al metodo .fadeIn() ma quel metodo mostra l'elemento e sfuma sempre al 100% di opacità.

Le durate sono espresse in millisecondi; valori più alti indicano animazioni più lente, non più veloci. Le stringhe 'fast' e 'slow' possono essere fornite per indicare la durata di 200 e 600 millisecondi, rispettivamente. Se viene fornita un'altra stringa, viene utilizzata la durata predefinita di 400 millisecondi. A differenza degli altri metodi, lo .fadeTo() richiede che venga specificato esplicitamente duration.

Se in dotazione, la richiamata viene sparato una volta che l'animazione è completa ...

Answer 4

Grazie al 10gler mia soluzione qui di seguito, utilizzando la visibilità per prevenire pulsante invisibile clic, ecc

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

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

Answer 5

Utilizzando una combinazione delle risposte di cui sopra, questo ha funzionato bene per me. È possibile modificare il tempo di animazione a proprio piacimento.

Per fadeIn:

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

Per fadeOut:

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

Assicurarsi di impostare il visibilty:'hidden' e opacity:0 al via per evitare la comparsa improvvisa sulla prima fade in se il display di default è nascosto, altrimenti non dovrebbe importare.

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