Question

Although I could find help on how to redirect pages but I could not find one which would match my situation.

I would like to fadeout the popup — which has a form inside it — before redirecting to the form’s ‘action’ link.

I have the fadeout in separate function as that function is more complicated and is called by number of times.

My jquery code :

    $('form').submit(function(e){
        function(e){
            hidePopup()
                    ,function(e){
            window.location.href = $('form').attr('action');
        };};

    });

    //hiding popup
    function hidePopup(){
        $(".popup").fadeOut("slow");
    };

Answer 1

fadeOut accepts a callback function as second parameter. That callback is exectued after completely feaded out. So just use:

$(".popup").fadeOut("slow", function(){//Executes after faded out//});

In your code, I’d suggest you rewrite your hidePopup function

function hidePopup(callback){
    $(".popup").fadeOut("slow",callback);
};

And execute it like

hidePopup(function(){
    window.location.href = $('form').attr('action');
});

Update You can check if you have passed a valid callback with the following code:

function hidePopup(callback){
    if (typeof(callback) =='function')
        $(".popup").fadeOut("slow",callback);
    else
        $(".popup").fadeOut("slow");
};

It is a robust check that guarantees that you have passed a valid callback (well, as JS is not strictly-typed language you can’t be sure that this function have the correct signature, but that’s outside that question).

If you are absolutely sure you will always pass callback or undefined and you are lazy enough to wish typing 20 characters less, you could simplify if (typeof(callback) =='function') to just if (callback). it will check that you have passed something. But that ‘s not a good practice (but popular though). 🙂

Update 2: length property of a function returns the number of it’s arguments. See MDN