jQuery event order and waiting till animation complete

Question

I have an slider animation but on clX.click event #close div hides before it is animated -250px left. How to wait till the animation completes and then hide #close div?

Answer 1

You can add a callback function to the animation. It would be fired once the animation is finished.

$('#clX').click(function() {
  $('#close').animate({
    marginLeft: "-250px"
  }, 500, function() {
    // Animation complete.
    $("#close").hide();
    //i supose $this.hide() 
would work also and it is more efficient.
  });
});