Event after a div has finished animating?

javascript, jquery

Solution

if you're using jQuery 1.5+ you could use the jQuery `promise()` method : http://jsfiddle.net/rGBk7/

e.g.

/* 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/

Problem

How can I make a function run after a certain element has finished animating? It's a slide-down like animation, the element is hidden and when something is clicked, it will become visible by sliding its contents down (+height). I have no control over the animation function on that element, so I can't use the callback option from the $.animate function... Right 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, feels hacky

Original source