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

Question

Kể từ khi tôi đã thêm một số scrollTop -animation, một số bộ phận của callback 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ó chỉ dường như lặp lại .show(), ít nhất tôi don' t có ấn tượng rằng số load() hoặc số .fadeIn() cũng được gọi lần thứ hai. Các .show() được lặp đi lặp lại ngay sau khi nó đã hoàn thành lần đầu tiên. Đặt tốc độ hoạt ảnh của scrollTop thành 0 không giúp ích gì!

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

Answer 1

animate gọi callback của nó một lần cho mỗi phần tử trong tập bạn gọi animate trên:

Nếu cung cấp, start, step, progress, complete, done, fail, và always callbacks đang kêu gọi a cơ sở mỗi phần tử ...

Vì bạn đang làm động hai phần tử (phần tử html và phần tử body), bạn sẽ nhận được hai cuộc gọi lại. (Đối với bất cứ ai tự hỏi tại sao OP được hiệu ứng động hai yếu tố, đó là vì các hình ảnh động hoạt động trên body trên một số trình duyệt nhưng trên html trên các trình duyệt khác.)

Để có được một đơn gọi lại khi các hình ảnh động hoàn tất , các animate tài liệu chỉ cho bạn tại bằng cách sử dụng phương pháp promise để có được một lời hứa cho hàng đợi hình ảnh động, sau đó sử dụng then phải 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 in his answer khi câu hỏi được hỏi lần đầu tiên. Tôi đã không cho đến bốn năm sau đó khi tôi nhận thấy nó đã mất tích, thêm nó, và ... sau đó thấy câu trả lời của Kevin. Xin hãy trả lời cho tình yêu của mình xứng đáng. Tôi hình dung như thế này là câu trả lời được chấp nhận, tôi nên rời khỏi nó trong)

Dưới đây là một ví dụ cho thấy cả hai callbacks yếu tố cá nhân, và gọi lại hoàn toàn:.

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>

Answer 2

Để nhận được một cuộc gọi lại đơn để hoàn thành nhiều hoạt ảnh yếu 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 Promise và Deferred Objects.