jQuery - using promise().done() more than once

Question

Well, I've been trying to do this tonight and I can't seem to finish it. I've got something I'm developing that has a 'menu', of sorts - for example: on a click of the back button, one submenu fades out and the other fades back in. But I'm having a bit of trouble with this; when I use a normal callback function the main menu fades back in before the submenu is finished fading out. If I use promise().done() , then it won't fire more than once (from what I get). I open the submenu, then hit the back button. The submenu fades out and nothing else happens. Help?

$('#newgame').click(function() {
    $('#menu').fadeOut(1000, function() {
        $('#newgameoptions').fadeIn(1000);
    });
});
$('.back').click(function() {
    $('.submenu').fadeOut(1000);
});
$('.submenu').promise().done(function() {
    $('#menu').fadeIn(1000);
});

Answer 1

You will need to create a new promise for every submenu fading out, ie move it into the handler:

$('.back').click(function() {
    $('.submenu').fadeOut(1000).promise().done(function() {
        $('#menu').fadeIn(1000);
    });
});

Or, without .promise() , you would just use the usual callback argument to the fadeOut method, like you have done it in the $('#menu').fadeOut() already:

$('.back').click(function() {
    $('.submenu').fadeOut(1000, function() {
        $('#menu').fadeIn(1000);
    });
});