.animate（）のコールバックが2回jqueryで呼び出される

scrollTop-animation を追加したので、コールバックの一部が2回呼び出されます。

$('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()すぐにそれが最初に終了したように繰り返されます。0ちなみに、scrollTopのアニメーション速度をに設定しても効果はありませんでした。

それはアニメーションキューと関係があると思いますが、回避策を見つける方法、特にこれが発生している理由を理解できません。

animateコールバックするセットの要素ごとに 1回コールバックを呼び出しますanimate。

指定した場合、start、step、progress、complete、done、fail、およびalwaysコールバックは上と呼ばれている要素ごとの基礎 ...

2つの要素（html要素とbody要素）をアニメーション化しているので、2つのコールバックを取得しています。（OPがなぜ2つの要素をアニメーション化しているのか疑問に思う方は、アニメーションbodyが一部のブラウザーでは機能するがhtml他のブラウザーでは機能するためです。）

アニメーションが完了したときに単一のコールバックを取得するには、animateドキュメントで、promiseメソッドを使用してアニメーションキューのpromiseを取得し、次にを使用thenしてコールバックをキューに入れるように指示します。

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

（注：質問が最初に尋ねられたとき、ケビンB は彼の回答でこれを指摘しました。4年後、それが欠落していることに気づき、それを追加してから、ケビンの回答を見つけました。彼の回答を教えてください。愛するに値する。これは受け入れられる答えだと思ったので、そのままにしておく必要がある。）

以下は、個々の要素のコールバックと全体的な完了コールバックの両方を示す例です。

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");
});

Promise オブジェクトとDeferredオブジェクトの詳細については、jQuery APIを参照してください。