jQuery 효과/애니메이션 실행이 지연됩니다.

Question

다음 코드를 사용하면 모든 항목이 Firebug 콘솔에서 순서대로 (데이터의 Ajax 게시 포함) 순서대로 표시되지만 모든 jQuery 효과/애니메이션 (fadeIn,, 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'); 
});