jQuery эффекты/анимация задерживаются в исполнении

Question

С помощью следующего кода все отображается нормально и последовательно в консоли 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 
     } 
    }); 
} 

Answer 1

Как уже упоминалось, вы не ждать, пока одна анимация не закончится, прежде чем начать другой. Вы только что настроили их на запуск одновременно. . В то время как вы использовали некоторые функции обратного вызова Я уверен, вы понимаете, как они работают, и просто нужно положить больше

Так 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'); 
});