Simple fadeOut() working erratically as ajax callback

Question

This is driving me mad!

I can't figure out why the fadeOut() function is not working here. I'm sure it's going to be something annoyingly simple, but I just can't see it. When the trigger button is clicked, the first fadeOut() works fine - #page3 fades out as expected and #holdingpage fades in. However, once the ajax call is completed the #holdingPage div does NOT fade out, but the #thanksPage div DOES fade in, so I'm left with the contents of both the #holdingPage div AND the #thanksPage div. The ajax call itself is working fine - the form is submitted and data written to the database via the php script.

Can anyone help?!

Here is the 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();    
  });

Answer 1

Try writing the ajax function fully in the animation complete of $('#page3').fadeOut(); I guess the sequence goes haywire here because the ajax has to be called once the page has fadedin and might be the ajax calls happening faster than the fadeIn

docu.on('click', "#finishSurveyButton", function(){
  $('#page3').fadeOut(function(){
  $('#holdingPage').fadeIn();
  });
  $("#inductSurvForm").ajaxForm({
    success: function(data){
      $('#holdingPage').fadeOut(function(){
        $('#thanksPage').fadeIn();  
      });

      }
    }).submit();    
  });