Callback function fires too early

Question

I have this simple function in jQuery:

function detailspage(page) {

  if (page != checkcurrent) {

    checkcurrent = page;

    $('div#details').children("div").slideUp("slow", function() {

        $('div#details').children("div"+page).slideDown("slow");

    });

  };

};

I have put three <div>'s inside another <div> called <div id="details">, and they are all slided up and out of sight by default. I now wish to make each of them slide down, when a button for each of them is clicked. Of course a <div> that is open must first be slided up and out of sight, before the new one is slided down. That is why I have tried this simple callback function above.

(The page variable contains an id for one of the div's, like #info or #cast_crew.)

But it doesn't work: You can see the error by clicking the three buttons on the left in the bottom of the page, named "Cast & crew", "Info" and "Galleri".

It all works apart from the callback function that doesn't seem to cause any delay. The callback has no effect. I simply want the slidedown of the new box to start when the slideup of the current box is finished.

What is wrong? Why doesn't my callback work?

Thank you.

Answer 1

I would take a look at the promise function in jquery to ensure all elements have completed the animation: http://api.jquery.com/promise/

For your example:

function detailspage(page) {
    if (page != checkcurrent) {
        // so we only have to search the dom once
        var details = $('div#details');
        checkcurrent = page;
        details.children("div").slideUp("slow").promise().done(
            function() {
                $('div' + page).slideDown("slow");
            });
    };
};

Working example: http://jsfiddle.net/cm3pv/6/

Answer 2

I tried Gary.S's accepted answer, but my function was still firing before the animation was complete. I found a suggestion on another post How to get jQuery to wait until an effect is finished?

Needed to use $.when( func ).done( function () { myFunc(); } );

I HAD to put my function in a new function.

What I ended up using looked like this (to use your example):

$.when( $('div#details').children("div").slideUp("slow") ).done(){ function() {
    $('div#details').children("div"+page).slideDown("slow");
});