jQuery wait till function is executed

Question

I'm trying to call 2 functions. The first function includes a jQuery effect. The second function (in this case is a jQuery effect), but may only execute if the first function is executed (and finished). Can someone help me out? Thanks!

Fox example: http://jsfiddle.net/fNH2u/1/

function hideSecond(){
    $("#second").hide("slow");
}

$("#first").click(function(){
    hideSecond();
    $(this).hide("fast");
});

and the HTML:

<div id="first">
    first
</div>
<div id="second">
    second
</div>

The function I want to call does more than just that jQuery effect. This is just an example. Putting the 2 functions together is not really what I'm looking for.

Answer 1

You will need to use a callback here.

function hideSecond(callback){
    $("#second").hide("slow", callback);
}

$("#first").click(function(){
    hideSecond(function() {
       $(this).hide("slow");
    });
});