jQuery事件顺序并等待动画完成

我有一个滑块动画但在clX.click事件#close div隐藏之前它是动画-250px。 如何等到动画完成然后隐藏#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

您可以向动画添加回调函数。 动画结束后会被触发。

 $('#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. }); }); 

Answer 2

@hasan，methinks @patxi意味着$（这个）

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