jQuery 效果/动画执行延迟

Question

使用以下代码，Firebug 控制台中的所有内容都按顺序正常显示，条目按顺序（包括数据的 Ajax 发布），但所有 jQuery 效果/动画（fadeIn、animate、@987654324 @、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');
 });