then - jquery ui animate

jQuery: FadeOut luego SlideUp

Question

Si se está eliminando un elemento, me gustaría desvanecerlo y deslizar los otros elementos hacia arriba para llenar el espacio vacío. Ahora, cuando uso fadeOut() el elemento no tiene una altura al final, lo que hace que los otros elementos salten (en lugar de deslizarse hacia arriba).

¿Cómo puedo slideUp() y el elemento justo después de fadeOut() ?

Answer 1

¿No puedes encadenarlo?

$(''myelement'').fadeOut().slideUp();

EDITAR :

Tal vez this ayude en su lugar?

Answer 2

La función fadeOut toma un segundo argumento opcional de una función de devolución de llamada, por lo que debería poder hacer algo como esto:

$(''elementAbove'').fadeOut(500, function() {
    $(''elementBelow'').slideUp();
});

EDIT: se olvidó de agregar la velocidad del fadeOut como primer parámetro

Answer 3

Pruebe $(''.row'').animate({ height: ''toggle'', opacity: ''toggle'' }, ''slow'').slideUp();

demo aquí

Answer 4

Suena como si fuera mejor usar el comando jQuery fadeTo

 $(function() {

     $("#myButton").click(function() {
         $("#myDiv").fadeTo("slow", 0.00, function(){ //fade
             $(this).slideUp("slow", function() { //slide up
                 $(this).remove(); //then remove from the DOM
             });
         });

     });

});

Demo de trabajo aquí .

Al ejecutar cada comando en la función de devolución de llamada del comando anterior, el comando no se ejecutará hasta que se complete el anterior; se produce un "salto" cuando el elemento se elimina del DOM sin esperar a que se complete el slideUp.

Answer 5

$("#id").fadeIn(500, function () {

    $("#id2").slideUp(500).delay(800).fadeOut(400);

});

Answer 6

jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
  if (this.is(":hidden")) {
    return this.slideDown(speed, easing).fadeTo(speed, 1, easing, callback);
  } else {
    return this.fadeTo(speed, 0, easing).slideUp(speed, easing, callback);
  }
};

Lo probé en JQuery 1.3.2, y funciona.

Edición: Este es el código del que lo llamé. # slide-then-fade es el ID de un elemento de botón, el artículo-texto es una clase en una etiqueta div:

$(document).ready(function() {
  $(''#slide-then-fade'').click(function() {
    $(''.article-text'').fadeThenSlideToggle();
  });
});

Edición 2: Modificado para usar el slideUp incorporado.

Edición 3: reescrito como un conmutador y usando fadeTo