fadeOut() y slideUp() al mismo tiempo?

Question

He encontrado jQuery: FadeOut then SlideUp y es bueno, pero no es el indicado.

¿Cómo puedo fadeOut() y slideUp() al mismo tiempo? Intenté dos llamadas a setTimeout() por separado con el mismo retraso pero el slideUp() sucedió tan pronto como se cargó la página.

¿Alguien ha hecho esto?

Answer 1

Usted puede hacer algo como esto, esta es una versión de palanca completa:

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

Para estrictamente un desvanecimiento:

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

Answer 2

que tenía un problema similar y fija así.

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

propiedad la cola dice que si los esquiadores de la animación o simplemente jugar de inmediato

Answer 3

Directamente animación resultados altura en un movimiento desigual en algunas páginas web. Sin embargo, la combinación de una transición de CSS con slideUp() de jQuery permite un acto de desaparición sin problemas.

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

slideFade($('#mySelector')); 

violín con el código:
http://jsfiddle.net/00Lodcqf

Esta es la solución que he usado en el proyecto dna.js donde se puede ver el código (github.com/dnajs/dna.js) para ver un apoyo adicional para alternar y devoluciones de llamada.

Answer 4

La respuesta aceptada por "Nick Craver" es definitivamente el camino a seguir. Lo único que agregaría es que su respuesta en realidad no la "oculta", lo que significa que el DOM todavía la ve como un elemento viable para mostrar.

Esto puede ser un problema si tiene margen o relleno en el elemento 'deslizado' ... aún se mostrarán. Así que me acaba de agregar una devolución de llamada a la función animate() para ocultar en realidad después de la animación es completa:

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

Answer 5

Lanzar una configuración más allí basado en @CodeKoalas. Representa el margen vertical y el relleno, pero no horizontal.

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

Answer 6

Es posible hacer esto con los métodos slideUp y fadeOut a sí mismos de esta manera:

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