jquery - Simple fadeOut() working erratically as ajax callback -

this driving me mad!

i can't figure out why fadeout() function not working here. i'm sure it's going annoyingly simple, can't see it. when trigger button clicked, first fadeout() works fine - #page3 fades out expected , #holdingpage fades in. however, once ajax call completed #holdingpage div not fade out, #thankspage div fade in, i'm left contents of both #holdingpage div , #thankspage div. ajax call working fine - form submitted , data written database via php script.

can help?!

here code:

html

<div id="page3" class="surveydivs"> ...blah...blah...blah... </div>  <div id="holdingpage" class="surveydivs" style="display: none;">   <div class="loadingdiv">     <img class="loadingimage" src="../css/ajax-loader.gif" />   </div> </div>  <div id="thankspage" class="surveydivs" style="display: none;"> ...blah...blah...blah... </div> 

jquery

docu.on('click', "#finishsurveybutton", function(){   $('#page3').fadeout(function(){   $('#holdingpage').fadein();   });   $("#inductsurvform").ajaxform({     success: function(data){       $('#holdingpage').fadeout(function(){         $('#thankspage').fadein();         });        }     }).submit();       }); 

try writing ajax function in animation complete of $('#page3').fadeout(); guess sequence goes haywire here because ajax has called once page has fadedin , might ajax calls happening faster fadein

docu.on('click', "#finishsurveybutton", function(){   $('#page3').fadeout(function(){   $('#holdingpage').fadein();   });   $("#inductsurvform").ajaxform({     success: function(data){       $('#holdingpage').fadeout(function(){         $('#thankspage').fadein();         });        }     }).submit();       });