jQuery effects/animation is delayed in execution

Question

With the following code everything is displayed normally and in sequence in the Firebug console with the entries in order (including the Ajax post of the data) but all the jQuery effects/animations (fadeIn, animate, slideUp, slideDown, animate, fadeOut) happen together at one time after the call to my Ajax function not when the actual step is executed.

Why is it doing this? How do I fix it?

$('#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');

here is 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

As mentioned you're not waiting until one animation has finished before you start the other. You have just set them up to in effect start all at the same time. Whilst you have used some callbacks i'm confident you understand how they work and just need to put more in.

So callbacks are needed:

 $('#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');
 });