如何在jQuery淡入淡出之前暫停JavaScript的執行

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/

Answer 2

jQuery中的大多數定時函數都支持回調，當定時操作完成時會調用該回調。 所以...

$pH('#coveringDiv').fadeIn(, 300, function() {
    ... code to execute after the fade completes ...
});

Answer 3

嘗試這個：

$pH('#coveringDiv').fadeIn(300, function() {
    adContainer = $pH(currAdBubble).find('.mcc');
    $pH(adContainer).empty().html("some html");
    $pH('.phAdScroller').attr('kw',keyword);
    setTimeout("$pH('#coveringDiv').fadeOut(500);",300);
});

Answer 4

fadeIn的第二個參數是動畫完成時調用的回調。

$pH('#coveringDiv').fadeIn(300, anotherFuncName);

要么

$pH('#coveringDiv').fadeIn(300, function() {
   // code here
});

Answer 5

暫停500秒。 或循環倒數。