Commande d'événement jQuery et attente jusqu'à l'animation terminée

Question

J'ai une animation de curseur mais sur l'événement clX.click #close div se cache avant qu'elle soit animée -250px gauche. Comment attendre jusqu'à la fin de l'animation, puis masquer #close div?

$(document).ready(function() { 
     $("#open").click(function() { 
      if ($("#close").is(":hidden")) { 
       $("#open").animate({ 
        marginLeft: "-32px" 
       }, 200); 

       $("#close").show(); 
       $("#close").animate({ 
        marginLeft: "250px" 
       }, 500); 
      } 
     }); 
     $("#clX").click(function() { 
      $("#close").animate({ 
       marginLeft: "-250px" 
      }, 500); 

      $("#open").animate({ 
       marginLeft: "0px" 
      }, 200); 

      $("#close").hide(); 
     }); 
    }); 

Answer 1

Vous pouvez ajouter une fonction de rappel à l'animation. Il serait tiré une fois l'animation terminée.

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

Answer 2

@hasan, methinks @patxi $ destinés (ce)

var closeable = $('#close'); 
$('#clx').bind('click', function(){ 
    // $(this) === $('#clx') 
    closeable.stop().animate({marginLeft:'-250px'},{ 
    duration: 500, 
    complete: function(){ 
     $(this).hide(); 
     // $(this) === closeable; 
    } 
    }); 
});