[解決済み] .animate()のコールバックが2回呼び出される jquery

質問

を追加したので scrollTop -アニメーションを追加したので、コールバックのいくつかの部分が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() も2回目に呼ばれるようになります。その .show() は1回目が終了するとすぐに繰り返される。scrollTop のアニメーション速度を 0 に設定してもダメでした。

animation-queueと関係があるのだと思いますが、回避策が見つからず、特に なぜ が起こっているのかがわかりません。

どのように解決するのですか？

animate に対して一度だけコールバックを呼び出します。 各要素 を呼び出したセットで animate を呼び出します。

が与えられると start , step , progress , complete , done , fail そして always のコールバックが呼び出されます。 要素ごとに ...

2つの要素をアニメーションさせるので ( html 要素、および body 要素) の場合、2 つのコールバックが発生します。 (疑問に思う人のために なぜ はなぜ 2 つの要素をアニメーション化しているのかと疑問に思う人は、アニメーションが body では動作しますが html になります)。

を取得するには シングル コールバックを取得するために、アニメーションの完了時に animate ドキュメントでは promise メソッドを使用してアニメーションキューのプロミスを取得し、次に then を使用してコールバックをキューに入れます。

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

(注：Kevin 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>