1

次のコードでは、Firebug コンソールにすべてのエントリが順番に (データの Ajax 投稿を含めて) 通常どおり順番に表示されますが、すべての jQuery エフェクト/アニメーション ( fadeIn、animate、slideUp、slideDown、) はanimate、fadeOut実際のステップが実行されたときではなく、私のAjax関数を呼び出します。

なぜこれを行うのですか？どうすれば修正できますか？

$('#overlay').fadeIn(500, function () { 
  $('#overlaybox').animate({ 'top': '40px' }, 100);
});
$('#survey').slideUp(1500);

console.log('-after overlay show');
console.log('before ajaxPutSurveyItems()');

ajaxPutSurveyItems(save, after);

console.log('after ajaxPutSurveyItems()');

$('#survey').slideDown(1500);
$('#overlaybox').animate({ 'top': '-200px' }, 300, function () {
  $('#overlay').fadeOut(2500); 
});

console.log('-after overlay hide');

ここに ajaxPutSurveyItems があります

function ajaxPutSurveyItems(answers, nextstep) {
    console.log('ajaxPutSurveyItems()');
    var p = {};
    p.uniqueid = gUniqueID;
    p.answers = answers;
    p.pageid = gSurveyPages[gCurrentPageIndex].ID;
    p.pageindex = gCurrentPageIndex.toString();
    p.surveydefid = gSurveyID;
    p.bypass = gIsBypass;
    var j = JSON.stringify(p);
    $.ajax({
        async: false,
        type: "POST",
        url: "surveydata.asmx/putSurveyItems",
        data: j,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        beforeSend: function(XHR) {
            console.log(':beforeSend');
        },
        success: function (data, status) {
            console.log(':success');
            // code removed for brevity
        },
        error: function (XHR, errStatus, errThrown) {
            console.log(':error');
            // code removed for brevity
        }
    });
}
4

1 に答える 1

0

前述のように、一方のアニメーションが終了するまで待たずに他方を開始できます。事実上すべて同時に開始するようにそれらを設定しました。いくつかのコールバックを使用しましたが、それらがどのように機能するかを理解していると確信しており、さらに追加する必要があります.

だからcallbacks必要です：

 $('#overlay').fadeIn(500, function () { 
   $('#overlaybox').animate({ 'top': '40px' }, 100);
 });
 $('#survey').slideUp(1500, function(){

      console.log('-after overlay show');
      console.log('before ajaxPutSurveyItems()');

      ajaxPutSurveyItems(save, after);

      console.log('after ajaxPutSurveyItems()');

      $('#survey').slideDown(1500, function(){

            $('#overlaybox').animate({ 'top': '-200px' }, 300, function () {
              $('#overlay').fadeOut(2500); 
            });     
      });

      console.log('-after overlay hide');
 });
于 2013-03-06T15:45:46.373 に答える