jQuery: FadeOut luego SlideUp

Question

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

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

Answer 1

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.

Editar: Este es el código desde el que lo llamé. # Deslizable entonces-fade es el ID de un elemento de botón, artículo de texto es una clase en una etiqueta div:

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

Edición 2: Modificado de utilizar el incorporado en slideUp.

Datos 3: volver a escribir como una palanca, y el uso de fadeTo

Answer 2

¿No se puede encadenar?

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

EDITAR:

Tal this le ayudará en su lugar?

Answer 3

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

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

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

Answer 4

Suena como que sería mejor utilizar 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 
      }); 
     }); 

    }); 

}); 

Working Demo here.

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 deslizamiento.

Answer 5

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

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

}); 

Answer 6

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

demo Here