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(); });
Comments
Post a Comment