Question

I want to use jQuery’s fadeToggle() function.

I have a hidden div and when I click on a link, then I want to call fadeToggle() that the div fades in and after another click fades out.

The clue is, that i want to resize the window after clicking with my own function (which is working well).

At the moment I have this solution:

jQuery:
$("#myLink").live("click", function () {
   $("#myDiv").toggleClass("myDivClass");
   Resize();
});

Css:
<style type="text/css">
#myDivclass {
display:none;
}
</style>

It works perfectly, but I want to do the same thing with fadeToggle() instead of toggleClass().

The problem is, that after the second click (after the div has faded out), the window does not resize – it resizes with toggleClass but not with fadeToggle.

Answer 1

You probably need to supply the Resize function as a callback to the fadeToggle method, so it runs when the animation is complete:

$("#myLink").live("click", function () {
    $("#myDiv").fadeToggle(1000, Resize);
});

Note that if you need to pass arguments into the Resize function you’ll have to use an anonymous callback:

$("#myLink").live("click", function () {
    $("#myDiv").fadeToggle(1000, function() {
        Resize();
    });
});

On another note, if you’re using the latest version of jQuery you definitely shouldn’t be using live. Use on instead (and if you’re using an older version, delegate is still better).