Зворотний виклик .animate () викликається двічі jquery

Оскільки я додав деяку scrollTopанімацію, деякі частини мого зворотного дзвінка дзвонять двічі:

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

Це, здається, повторює .show(), принаймні, у мене немає враження, що load()або .fadeIn()називають теж вдруге. .show()Отримує повторюється , як тільки він закінчив в перший раз. До речі, налаштування швидкості анімації scrollTop 0не допомогло!

Я припускаю, що це має щось спільне з чергою анімації, але я не можу зрозуміти, як знайти обхід, і особливо, чому це відбувається.

animateвикликає зворотний виклик один раз для кожного елемента в наборі, на який ви дзвоните animate:

При поставці, то start, step, progress, complete, done, fail, і alwaysзворотні виклики називаються на основі кожного елемента ...

Оскільки ви анімуєте два елементи ( htmlелемент і bodyелемент), ви отримуєте два зворотних виклику. (Для всіх, хто цікавиться, чому ОП анімує два елементи, це тому, що анімація працює bodyв деяких браузерах, а htmlв інших браузерах.)

Щоб отримати єдиний зворотний виклик, коли анімація завершена, animateдокументи вказують на використання promiseметоду, щоб отримати обіцянку для черги анімації, а потім використовувати thenдля черги зворотного дзвінка:

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

(Примітка: Кевін Б. вказав на це у своїй відповіді, коли запитання було вперше поставлено. Я був лише через чотири роки, коли помітив, що він відсутній, додав його, і ... потім побачив відповідь Кевіна. Будь ласка, дайте його відповідь Люблю це заслуговує. Я зрозумів, що це прийнята відповідь, я повинен залишити її.)

Ось приклад, що показує як виклики окремих елементів, так і загальний зворотний виклик завершення:

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>

Щоб отримати єдиний зворотний виклик для завершення анімації з декількома елементами, використовуйте відкладені об'єкти.

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

Дивіться API jQuery для детального опису Обіцянь та Відкладених Об'єктів .