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/