jquery no esperará a que se complete la animación antes de eliminarla, ¿por qué? - jquery

Estaba trabajando en algo simple, en lugar de simplemente hacer:

$(this).next().remove();

Quería que tuviera un poco más de bengala, y quería agregar una función animada

$(this).next().slideUp().remove();

donde se deslizará hacia arriba para ocultar el elemento antes de eliminarlo. Mientras lo probaba con Chrome, prácticamente elimina los elementos y no logra la transición suave que esperaba.

Las pruebas sin eliminar tienen los elementos que utilizan slideUp () correctamente.

¿Hay algo que este olvidando?

Respuestas

Pruebe con la función de devolución de llamada de slideUp() método.

$(this).next().slideUp(function() {
// remove the element after
// animation finished
$(this).remove();
});

Esto es porque slideUp sucede en el fondo Para esperar hasta que termine, use su devolución de llamada.

$(this).next().slideUp(function(){
$(this).remove();
});

La llamada de animación es asíncrona, ya que se inicia pero la ejecución continúa. La forma de lograr lo que desea es con una devolución de llamada tal como esto:

 $(this).next().slideUp(function(){
$(this).remove();
});