javascript - jQuery: offset() アニメーションと ajax

Question

jQuery ajax とアニメーションに少し問題があります。私のページを呼び出すメニューを備えたレイアウトがあり、読み込まれたときに小さなアニメーションを提供しますjQuery easing

これが私のajax.js

$(document).ready(function() {

    // Ajax request
    $(".transition").click(function() {
      page = ( $(this).attr("id") );
      $.ajax({
        type: "GET",
        url: page,
        data: "ajax=true",
        cache: false,
        success: function(html) {
          afficher(html);
        },
        error: function(XMLHttpRequest,textStatus,errorThrows) {
          // Erreur durant la requête
        }
      });
    });

    function afficher(donnees) {
      $(".step").empty();
      $(".step").append(donnees);

      // Animate
      var step_position = $(".step").offset();
      $(".step").offset({ top: step_position.top, left: step_position.left - 1000 });
      $(".step").animate({
          "left": '+=1000',
        }, 750, 'easeOutBack');
    }
});

ユーザーがクリックすると、すべてがうまく機能します。

ただし、次の場合:

• ユーザーが同じリンクをダブルクリックする
• ユーザーが複数のリンクをすばやくクリックする

次に、ロードされたデータがページの外に出ます。

私は非同期データを扱っておりoffset、正確な時間に を要求しているという事実に問題があることを知っています。( を実行する代わりに) パラメーターとして定数を入れようとしましvar step_position = $(".step").offset();たが、うまくいきませんでした。

ajax 呼び出しが何度行われても、データを常に正しく表示するにはどうすればよいですか?