Question

I have this:

$("a.fadeout").click(function(event){
    event.preventDefault();
    var loc = this.href;

    //Do this first...
    $($(".faded").get().reverse()).each(function(i) {
        $(this).delay(i * 100).fadeOut();
    });

    //And only then do this.. 
    window.location = loc;

});

How do I force the fadeouts to complete before the location changes? If it was just one fadeOut() I would use it’s callback, but as there are many, I can’t work out how to do it.

Cheers!
Ben

Answer 1

The following works;

$("a.fadeout").click(function(event){
    event.preventDefault();

    var loc = this.href;
    var amount = $($(".faded").get().reverse()).each(function(i) {
        $(this).delay(i * 100).fadeOut(function () {
            if (i == amount -1) {
                window.location = loc;
            }
        });
    }).length;
});

It’s the cleanest way I can think of. We store the total amount of elements and check in the callback for fadeOut whether it’s the last callback that was bound. If it is, it executes the redirect.