jquery will not wait for animate to finish before removing, why?

Question

I was working on something simple, instead of just doing:

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

I wanted it to have a bit more flare, and wanted to add an animate function

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

where it will slide up to hide the item before removing it. While testing it with Chrome, it pretty much just removes the items and doesnt accomplish the smoothe transition i was expecting.

Testing without the remove has the items using slideUp() correctly.

Is there something I am missing?

Answer 1

Try with callback function of slideUp() method.

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

Answer 2

This is because slideUp happens in the background. To wait until it's done, use its callback.

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