Event after a div has finished animating?

Question

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

Answer 1

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/