Callback của .animate () được gọi hai lần jquery

Vì tôi đã thêm một số scrollTop-animation, một số phần của lệnh gọi lại của tôi được gọi hai lần:

$('html, body').animate({scrollTop: '0px'}, 300,function() {
    $('#content').load(window.location.href, postdata, function() {                 
        $('#step2').addClass('stepactive').hide().fadeIn(700, function() {
            $('#content').show('slide',800);                    
        });
    });
});

Nó dường như chỉ lặp lại .show(), ít nhất tôi không có ấn tượng rằng cái load()hoặc cái .fadeIn()được gọi là lần thứ hai. Việc này .show()được lặp lại ngay sau khi nó kết thúc lần đầu tiên. Nhân tiện, đặt tốc độ hoạt ảnh scrollTop thành 0không hữu ích!

Tôi cho rằng nó có liên quan gì đó đến hàng đợi hoạt ảnh, nhưng tôi không thể tìm ra cách tìm giải pháp thay thế và đặc biệt là tại sao điều này lại xảy ra.

animategọi lại nó một lần cho mỗi phần tử trong tập hợp bạn gọi animate:

Nếu cung cấp, start, step, progress, complete, done, fail, và alwayscallbacks được gọi là trên một cơ sở cho mỗi yếu tố ...

Vì bạn đang tạo hoạt ảnh cho hai phần tử ( htmlphần tử và bodyphần tử), bạn sẽ nhận được hai lần gọi lại. (Đối với bất kỳ ai thắc mắc tại sao OP lại tạo hoạt ảnh cho hai phần tử, đó là vì hoạt ảnh hoạt động bodytrên một số trình duyệt nhưng htmltrên các trình duyệt khác.)

Để nhận được một lệnh gọi lại duy nhất khi hoạt ảnh hoàn tất, animatetài liệu hướng bạn đến bằng cách sử dụng promisephương thức để nhận lời hứa cho hàng đợi hoạt ảnh, sau đó sử dụng thenđể xếp hàng gọi lại:

$("html, body").animate(/*...*/)
    .promise().then(function() {
        // Animation complete
    });

(Lưu ý: Kevin B đã chỉ ra điều này trong câu trả lời của anh ấy khi câu hỏi được đặt ra lần đầu tiên. Tôi cho đến bốn năm sau khi nhận thấy câu trả lời bị thiếu, đã thêm nó và ... sau đó xem câu trả lời của Kevin. Vui lòng cho câu trả lời của anh ấy yêu nó xứng đáng. Tôi đã nghĩ rằng đây là câu trả lời được chấp nhận, tôi nên để nó trong.)

Dưới đây là một ví dụ hiển thị cả lệnh gọi lại phần tử riêng lẻ và lệnh gọi lại hoàn thành tổng thể:

jQuery(function($) {

  $("#one, #two").animate({
    marginLeft: "30em"
  }, function() {
    // Called per element
    display("Done animating " + this.id);
  }).promise().then(function() {
    // Called when the animation in total is complete
    display("Done with animation");
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

<div id="one">I'm one</div>
<div id="two">I'm two</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Để nhận được một lệnh gọi lại để hoàn thành nhiều hoạt ảnh phần tử, hãy sử dụng các đối tượng hoãn lại.

$(".myClass").animate({
  marginLeft: "30em"
}).promise().done(function(){
  alert("Done animating");
});

Xem API jQuery để biết mô tả chi tiết về các Đối tượng Hứa hẹn và Trì hoãn .