div完成动画后的事件？

Question

如何在某个元素完成动画后让函数运行？这是一个类似动画的向下滑动，元素被隐藏，当点击某些东西时，它会通过向下滑动其内容（+高度）变得可见。

我无法控制该元素上的动画函数，因此我无法使用 $.animate 函数中的回调选项...

现在我有类似的东西

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

这可行，但我不喜欢它，感觉很hacky

Answer 1

如果你使用 jQuery 1.5+，你可以使用 jQuery promise() 方法：http://jsfiddle.net/rGBk7/

例如

/* do animation */
$("div").animate({ 'marginLeft' : '300px' }, 1000);

/* attach a promise to animated element/s */    
$("div").promise().done(function() {
    alert("animation end");
});

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

Answer 2

你的意思是：

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

动画队列完成后执行