javascript - 如何暂停 javascript 的执行直到 jquery fade 完成

Question

我想做这样的事情

1. 淡入一个覆盖其他 div 的 div
2. 更改其他一些 div 的内容
3. 淡出覆盖 div 并显示其下方的其他一些 div。

这是一个代码:

$pH('#coveringDiv').fadeIn(300);
//want to start doing something now, but only after above fadeIn finishes
adContainer = $pH(currAdBubble).find('.mcc');
$pH(adContainer).empty().html("some html");
$pH('.phAdScroller').attr('kw',keyword);
setTimeout("$pH('#coveringDiv').fadeOut(500);",300);

但是发生的情况是，fadeIn 和之后编写的代码一起开始。我希望 fadeIn 下面的代码仅在 fadeIn 完成后启动。我尝试了一个空的 setTimeout，但这也没有帮助。将该代码放入函数中并在 setTimeout() 中调用它太奇怪了，因为需要向该函数传递许多参数。那么如何实现这一点呢？

Answer 1

fadeIn 采用回调函数，该函数将在 fadeIn 完成后执行:

$pH('#coveringDiv').fadeIn(300, function () {
    //want to start doing something now, but only after above fadeIn finishes
    adContainer = $pH(currAdBubble).find('.mcc');
    $pH(adContainer).empty().html("some html");
    $pH('.phAdScroller').attr('kw',keyword);
    setTimeout("$pH('#coveringDiv').fadeOut(500);",300);
});

http://api.jquery.com/fadeIn/