Event after div has finished animation?

Question

How can I run a function after a certain element has completed an animation? This slide is down, like an animation, the element is hidden, and when something is clicked, it will become visible by moving its contents down (+ height).

I have no control over the animation function of this element, so I cannot use the callback function from the $ .animate function ...

Now i have something like

$('.trigger').click(function(){ // <-- "trigger" will make the element animate setTimeout(myfunction, 500); }); 

which works, but I don’t like it, it’s hacky

Answer 1

If you are using jQuery 1.5+, you can use the jQuery promise() method: http://jsfiddle.net/rGBk7/

eg.

 /* do animation */ $("div").animate({ 'marginLeft' : '300px' }, 1000); /* attach a promise to animated element/s */ $("div").promise().done(function() { alert("animation end"); }); 

See http://api.jquery.com/promise/

Answer 2

Do you mean:

 $("div").queue(function(){ your_function(); }); 

It will be executed after the completion of the animation queue.