jQuery事件順序，並等待動畫完成

Question

我有一個滑塊動畫，但在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() <br/>would work also and it is more efficient. 
    }); 
}); 

Answer 2

@hasan，記錯@patxi意味着$（本）

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