fadeOut() e slideUp() allo stesso tempo?

Question

Ho trovato jQuery: FadeOut then SlideUp ed è buono, ma non è quello giusto.

Come posso fadeOut() e slideUp() allo stesso tempo? Ho provato due chiamate setTimeout() separate con lo stesso ritardo ma lo slideUp() si è verificato non appena la pagina è stata caricata.

Qualcuno ha fatto questo?

Answer 1

Si può fare qualcosa di simile, questa è una versione completa di commutazione:

$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow'); 

Per strettamente una dissolvenza:

$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow'); 

Answer 2

Ho avuto un problema simile e fissata in questo modo.

$('#mydiv').animate({ 
      height: 0, 
     }, { 
      duration: 1000, 
      complete: function(){$('#mydiv').css('display', 'none');} 
     }); 
$('#mydiv').animate({ 
      opacity: 0, 
     }, { 
      duration: 1000, 
      queue: false 
     }); 

proprietà coda dice che se coda l'animazione o semplicemente giocare subito

Answer 3

Direttamente animano i risultati di altezza con un movimento a scatti su alcune pagine web. Tuttavia, la combinazione di una transizione CSS con slideUp() di jQuery rende un atto di scomparsa.

function slideFade(elem) { 
    var fade = { opacity: 0, transition: 'opacity 0.5s' }; 
    elem.css(fade).slideUp(); 
    } 

slideFade($('#mySelector')); 

violino con il codice:
http://jsfiddle.net/00Lodcqf

Questa è la soluzione che ho usato nel progetto dna.js dove è possibile visualizzare il codice (github.com/dnajs/dna.js) per vedere supporto aggiuntivo per la commutazione e callback.

Answer 4

La risposta accettata da "Nick Craver" è sicuramente la scelta giusta. L'unica cosa che aggiungo è che la sua risposta in realtà non "nasconde", il che significa che il DOM lo vede ancora come un elemento vitale da mostrare.

Questo può essere un problema se si dispone di margini o padding sull'elemento "slid" ... verranno comunque visualizzati. Così ho appena aggiunto un richiamo alla funzione animate() per nascondere realtà dopo l'animazione è completa:

$("#mySelector").animate({ 
    height: 0, 
    opacity: 0, 
    margin: 0, 
    padding: 0 
}, 'slow', function(){ 
    $(this).hide(); 
}); 

Answer 5

Lanciare un altro affinamento in là sulla base di @CodeKoalas. Rappresenta margine verticale e riempimento ma non orizzontale.

$('.selector').animate({ 
    opacity: 0, 
    height: 0, 
    marginTop: 0, 
    marginBottom: 0, 
    paddingTop: 0, 
    paddingBottom: 0 
}, 'slow', function() { 
    $(this).hide(); 
}); 

Answer 6

E 'possibile farlo con i metodi slideUp e fadeOut se stessi in questo modo:

$('#mydiv').slideUp(300, function(){ 
    console.log('Done!'); 
}).fadeOut({ 
    duration: 300, 
    queue: false 
});