0

要素に関する.click()イベントがあります。閉じられた後、このmobには遷移が発生し、AJAX呼び出しが実行されます。それが起こるすべてです。

.click()必要なのは、遷移がサポートされていない場合でも、これらの両方が実行されたときに実行する関数内に配置するコールバックです。タイムラインは次のとおりです。

jQueryは、ajax呼び出しと遷移を待機し、ajax呼び出しが完了し、遷移が終了したか、まったく発生しなかった後にコールバックを実行する必要があります。

これどうやってするの？ありがとう！

注：$.ajax()問題の要素でajax呼び出しと通常のCSS3遷移に使用しています。javascriptイベントバインディングを使用してtransitionEndを検出できます。transitionEndと呼ばれる変数の設定と、ブラウザーサポートのtransitionsがsupportsTransを呼び出すかどうかを検出する別の変数があります。

4

1 に答える 1

5

各イベントにフラグを設定します。最初はfalseです。問題の2つのイベントをフックします（transitionEndそしてajax success、それはのように聞こえます）。各イベントはフラグを設定し、関数を呼び出します。その関数はフラグをチェックします。両方が設定されている場合、それは何かをします。

animate物事を単純にするために、CSSトランジションではなくを使用した例を次に示します。ソース

jQuery(function($) {

  $("#theButton").click(function() {
    this.style.display = "none";
    $("#box, #content").show();
    doTheStuff();
  });

  function doTheStuff() {
    var ajaxDone = false,
        ajaxFailed = false,
        animationDone = false;

    display("Triggering ajax and animation");

    $.ajax({
      url: "http://jsbin.com/ibebiv",
      method: "GET",
      success: function(data) {
        $("#content").append(data);
        display("ajax done");
        ajaxDone = true;
        checkDone();
      },
      error: function() {
        ajaxFailed = true;
        checkDone();
      }
    });

    $("#box").animate({
      left: "+200px"
    }, function() {
      display("animation done");
      animationDone  = true;
      checkDone();
    });

    function checkDone() {
      if ((ajaxDone || ajaxFailed) && animationFlag) {
        display("<strong>All done</strong>");
      }
    }
  }

  function display(msg) {
    $("<p>").html(msg).appendTo("#content");
  }
});

ajax呼び出しが失敗した場合に備えて、エラー処理に注意してください。

于 2012-05-06T08:52:01.500 に答える