CODEWITHSUNDEEP
jqueryfade
Keith L.
Keith L.

Reputation: 2124

jQuery: How to use fadeToggle()?

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.

Upvotes: 2

Views: 4896

Answers (3)

Marc
Marc

Reputation: 6771

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

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

Upvotes: 0

ipr101
ipr101

Reputation: 24236

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();
});

Upvotes: 1

James Allardice
James Allardice

Reputation: 165971

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

Upvotes: 3

Related Questions