Dissolvenza degli elementi in entrata e in uscita senza modificare il layout della pagina

Il comportamento normale quando si utilizza fadeIn e fadeOut è di usare la proprietà display . Tuttavia, questo cambia il layout della pagina.

Come posso fare in modo che fadeIn e fadeOut non modifichino il layout della pagina?

Anche

invece di .fadeIn() puoi .animate({opacity:1})
e invece di .fadeOut() puoi .animate({opacity:0})

Puoi 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"); 

Usa fadeTo :

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

Le durate sono date in millisecondi; valori più alti indicano animazioni più lente, non più veloci. Le stringhe 'fast' e 'slow' possono essere fornite per indicare durate 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 di effetto, .fadeTo() richiede che la duration sia specificata esplicitamente.

Se fornito, il callback viene triggersto una volta completata l’animazione …

Grazie a 10gler la mia soluzione di seguito, utilizzando la visibilità per evitare clic del pulsante invisibile, ecc.

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

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

Per fadeIn :

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

Alla fadeOut :

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

Assicurati di impostare la visibilty:'hidden' e opacity:0 all’inizio per evitare la comparsa improvvisa della prima dissolvenza se la visualizzazione predefinita è nascosta, altrimenti non dovrebbe avere importanza.

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