.Animate () 'nin geri araması iki kez jquery çağrılıyor

Biraz scrollTop-animasyon eklediğim için geri aramamın bazı kısımları iki kez aranıyor:

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

Sadece tekrarlamak gibi görünüyor .show()en azından ben izlenimi yok, load()ya .fadeIn()da ikinci kez denilen olsun. .show()En kısa sürede ilk kez tamamlanır tamamlanmaz tekrarlanan alır. ScrollTop animasyon hızını ayarlama bu 0arada yardımcı olmadı!

Bunun animasyon kuyruğu ile bir ilgisi olduğunu varsayıyorum, ancak nasıl bir geçici çözüm bulacağımı ve özellikle bunun neden olduğunu çözemiyorum.

animateÇağırdığınız kümedeki her öğe için geri çağrısını bir kez çağırır animate:

Tedarik edilirse, start, step, progress, complete, done, fail, ve alwaysgeri çağrıları, bir çağırılır başına elemanı bazında ...

İki öğeyi ( htmlöğe ve bodyöğe) canlandırdığınız için , iki geri çağrı alıyorsunuz. ( OP'nin neden iki öğeyi canlandırdığını merak edenler için, bunun nedeni animasyonun bodybazı tarayıcılarda, ancak htmldiğer tarayıcılarda çalışmasıdır.)

Animasyon tamamlandığında tek bir geri arama almak için , animatedokümanlar sizi promiseanimasyon kuyruğu için bir söz alma yöntemi kullanmaya ve ardından thengeri aramayı sıraya koymak için kullanmaya yönlendirir:

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

(Not: Kevin B , soru ilk sorulduğunda cevabında buna işaret etti . Dört yıl sonra eksik olduğunu fark edip ekledim ve ... sonra Kevin'in cevabını görünceye kadar bunu yapmadım. Lütfen cevabını verin Bunu hak ettiğini seviyorum. Kabul edilen yanıtın bu olduğunu düşündüm, içinde bırakmalıyım.)

Hem tek tek öğe geri aramalarını hem de genel tamamlama geri aramalarını gösteren bir örnek:

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>

Birden çok öğe animasyonunun tamamlanması için tek bir geri arama almak için ertelenmiş nesneleri kullanın.

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

Promise ve Ertelenen Nesnelerin ayrıntılı açıklaması için jQuery API'sine bakın .