jQuery wait for event to complete

Question

How can I realize that when I have a function

$('.anyclass').slideToggle(1000);

that the program exetutes the function test() after the slideToggle completed?

If I write like this:

$('.anyclass').slideToggle(1000);
test();

...test() gets executed before slideToggle completed.

How can I realize? I don't know jQuery very well ...

Thank you for your help! Regards, Florian

EDIT: Results u can see here: www.virtual-swiss-hornets.ch

Answer 1

You can add a callback function to your jQuery function.

$('.anyclass').slideToggle(1000,function() { test(); });

That function will ONLY fire once the slide is complete.

Answer 2

I think slideToggle should accept the second argument callback, like this:

$('.anyclass').slideToggle(1000, function() {/* do anything after animation is complete */});

Actually for your particular case it is as easy as:

$('.anyclass').slideToggle(1000, test); 

Answer 3

If you only need this to fire once, Checkout the jquery API for when done

$.when(('.anyclass').slideToggle(1000)).done(function() { test(); });

Answer 4

What you need is to use the callback function

http://api.jquery.com/slideToggle/

.slideToggle( [ duration ], [ callback ] )

   ('.anyclass').slideToggle(1000, function() { test(); });

Answer 5

The best way should be this

$('#result').append($("<div class='message'>Result Sucess</div>")).slideToggle(5000,function(){$(this).remove()});