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
        }
    });
}

http://stackoverflow.com/questions/1058158/can-somebody-explain-jquery-queue-to-me — BBagi, Mar 06 '13 at 15:42
the code is very large and not appropriate to post. basically a button click event fires this code and all looks fine in Firebug console, but the effects/animations all execute after the call to my Ajax data save routine. This is the simplified version of the problem using beforeSend: and complete: in the Ajax call. — glw, Mar 06 '13 at 15:43
what does `ajaxPutSurveyItems` look like? and what are `save` and `after`? — darshanags, Mar 06 '13 at 15:44
@darshanags - save and after are strings... '107|9' and 'next' are examples — glw, Mar 06 '13 at 16:11
Uhm.. I am not sure, but `async : false` let the call to be synchronous and so the script wait for it. Or at least I guess so. — steo, Mar 06 '13 at 17:30

Jamie Hutber · Accepted Answer · 2013-03-06T16:22:19.570

0

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

edited Mar 06 '13 at 16:22

answered Mar 06 '13 at 15:45

Jamie Hutber

26,790
46
179
291

i had the show effects in the beforeSend: and the hide effects in the complete: of the actual ajax call but the same effect was happening. basically the button click happens then it seems like the browser is hung until the end of the ajax call (which currently calls a SQL sproc delayed for 5 seconds) when all the effects fire. – glw Mar 06 '13 at 15:59
thanks! this worked great! sans the misspelled 'function' in the slideDown effect. – glw Mar 06 '13 at 16:21

jQuery effects/animation is delayed in execution

1 Answers1