I have what I thought was a relatively easy Ajax/animation that I'm adding to a client site to select between projects for display as images. The flow goes something like this:
- User clicks on a thumbnail in a project overview (pHome).
- Using jQuery, ajax load in an XML file with the image, caption and project description data (project1).
- Construct the HTML from the XML file and inject it into the DOM (div id="project1").
- Animate and (4.5) fade out pHome.
- Fade in project1.
- Add a 'puff' effect to the thumbnail that brought the user to the project.
All of these things need to happen synchronously, but I can't find the right flow for the functions. Attaching all of these steps to the user click fades out pHome before the animation completes, and the 'puff' effect fires before the project1 div is even visible.
As it is, I have functions for all of these steps, and it seems like a real mess. What I'm asking for is some best-practice way of structuring these functions so they all happen synchronously (with the possible exception of 2 & 3). Just as an aid, here's the pseudocode for my problem:
$('#thumbnail').live('click', function(){
loadXML(thumbnail_id);
makeHMTL(data);
$('pHome').animate({blah}).fadeOut();
$('project1').fadeIn();
$('thumbnail_id').puff();
});
I know this is obviously a bad way to do it - but I can't figure out how to nest/structure the functions to make them all synchronous. And really I'd like an answer that gives me some way to structure my functions in the future to avoid rat-nests. Educate me! :)