Обратный вызов .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 animation-speed значения 0не помогла!

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

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

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

Поскольку вы анимируете два элемента ( htmlэлемент и bodyэлемент), вы получаете два обратных вызова. (Для тех, кто задается вопросом, почему OP анимирует два элемента, это потому, что анимация работает 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");
});

Подробное описание обещаний и отложенных объектов см. В jQuery API .