Jquery - Remove() after hide()

Question

I have a div that I want to remove using remove(). I want to show an animation before/while removal of div. I have only been able to show the animation when hiding the div.

If i want to show the animation then do remove(). How is this done???

Code so far:

//Delete Button - delete from cart
$('.ui-icon-trash').live('click',function() {
    $(this).closest('li').hide("puff", {}, 1000)
});

Answer 1

Do it in the callback function for .hide() (jQuery UI .hide() reference), like this:

$('.ui-icon-trash').on('click', function() {
  $(this).closest('li').hide("puff", {}, 1000, function() {
    $(this).remove();
  });
});

The function at the end runs as a callback, executing when the animation is done...so when you want :)

Answer 2

You might check this also:

$(this).hide("puff").delay(10).queue(function(){$(this).remove();});