jQuery animate help

Question

This isn't working. I'm trying to replicate the animate to red and then remove effect as in the WordPress admin. The element gets removed, but it doesn't animate before that.

$('.delete-item').live('click', function(){
            $(this).parent().parent().animate({backgroundColor: '#ff0000'}, 'slow').empty().remove();
        });

Answer 1

As for as i know you can not animate the background color, you need the color plugin in order to do that.

Answer 2

Use the .animate() callback, like this:

$('.delete-item').live('click', function(){
  $(this).parent().parent().animate({backgroundColor: '#ff0000'}, 'slow', function() {
    $(this).empty().remove();
  });
});

The callback won't execute until the animation is complete, your current method queues the animation but only executes one frame of it before the element is removed from the DOM, this lets the entire animation execute then remove it.