Thứ tự sự kiện jQuery và chờ cho đến khi hoạt ảnh hoàn thành

Question

Tôi có hình động thanh trượt nhưng trên sự kiện clX.click #close div hidden trước khi nó hoạt ảnh -250px bên trái. Làm thế nào để chờ đợi cho đến khi các hình ảnh động hoàn thành và sau đó ẩn #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

Bạn có thể thêm chức năng gọi lại vào hoạt ảnh. Nó sẽ được kích hoạt khi hoạt ảnh kết thúc.

$('#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, hình như @patxi $ nghĩa (điều này)

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