jQuery: How to use fadeToggle()?

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).

Answer 2

You could try adding resize to the callback function, its possible that the animation hasn't completed by the time Resize is called so you don't get the affect you want.

$("#myDiv").fadeToggle("fast", function () {
   Resize();
});

Answer 3

Maybe because you have to wait until the fadeToggle function is completed, try this:

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