Question

does there have any code, if i set the .delay(500) show divA, then when divA show, divB will be auto hide when detect divA are appear. Because for my visual design, DivA and DivB will be the same place. i can’t use too much on the .delay for the page, because i scared of the timer problem, because not everyone has the good internet access.

Did there any way to do that? because i not that expert on the animation part, so i use gif animation to proceed.

my visual flow explaine:
1st thing will show a big paper-roll (it’s close), when i click on the paper-roll, it will scale small and then will move to the left side, and then the next frame will be roll out the paper-roll form left to right.

:((

Answer 1

You can use a callback function with things like this to detect when the first thing has finished it’s intended operation…

$('#divA').delay(500).fadeIn('slow', function() {
    // divA has finished loading.. NEXT.
    $('#divB').hide();
});

And you can continue with things like fadeOut() and more…

$('#divB').fadeOut('slow', function() {
    // Oh look, divB has just faded out!
});

---

So finally, if you have #divA set to hidden, and #divB visible, #divA fades in and when it has finished fading in, #divB fades out.

Of course, you can switch

.fadeIn('slow', function() . . . to .show(function() ... instead if you don’t want the fade animations.

---

Your final code, according to your question:

<div id="divA" style="display:none">
    divA
</div>
<div id="divB">
    divB
</div>

<script type="text/javascript">
    $('#divA').delay(500).fadeIn('slow', function() {
        // divA has finished loading.. NEXT.
        $('#divB').fadeOut('slow');
    });
</script>