Question

I am combining some animations in jquery with some ajax loading – From function A, I want to be able to call function B to fade out the current content, and once that animation is done, return to run the rest of the code in function A. Is this possible? I’m picturing something like this:

function buttonClicked(){
  if(sectionHidden != true){
    hideSection($sectionRef);
  }
  //RUN THE FOLLOWING AFTER HIDE SECTION HAS FINISHED (FUNCTION B)
  loadSection();
}

function hideSection($sectionRef){
  $sectionRef.fadeTo(500,0,function(){
    return someValue;
  });
}

Because of some other complexities in my code (multiple functions calling hideSection), I can’t call loadSection from hideSection.

Answer 1

.fadeTo() takes a callback parameter which is called when the fade-out is finished. All you have to do is supply it the loadSection function. To wit:

function buttonClicked() {
    if (!sectionHidden) {
        hideSection($sectionRef, loadSection);
    }
    else {
        loadSection();
    }
}

function hideSection($sectionRef, doneCallback) {
    $sectionRef.fadeTo(500, 0, doneCallback);
}

If you don’t want to load the section after calling hideSection() from another part of your code:

function someStuff() {
    //stuff...
   hideSection($superRef); //won't call loadSection()
   //more stuff
}