How to pause execution of javascript till jquery fade finishes

Question

I want to do something like this

1. Fadein a div that covers some other div
2. change contents of that some other div
3. fadeout covering div and reveal that some other div below it.

Here is a code for that:

$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);

but what happens is, fadeIn and code written after that start together. i want code below fadeIn to start only after fadeIn finishes. I tried an empty setTimeout , but that didn't help as well. It would be too weird to put that code in a function and call it in setTimeout() as there will be a need to pass many arguments to that function. So how to achieve this ?

Answer 1

fadeIn takes a callback function that will execute after the fadeIn is complete:

$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

Most timed functions in jquery support a callback, which gets called when the timed action completes. So...

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

Answer 3

Try this:

$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

The 2nd argument of fadeIn is a callback thats called when the animation completes, so;

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

or

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

Answer 5

Add a pause for 500 seconds. or a loop countdown.