FrK
FrK

Reputation: 89

Can't get .delay() working

I have almost zero experience with jQuery so here it goes... I have already done a lot of research but I just can't figure out what I'm doing wrong...

I want two DIV's to fade in after each other, but with a delay between the first one and the second one. This is what I have so far:

   <script type="text/javascript">

$(document).ready(function(){

        $("div.1").hide();
        $("div.2").hide();
        $("div.1").fadeIn(400);
        $("div.2").delay(800).fadeIn(400);
});

</script>
<div class="1">
This is DIV1</div>
<div class="2">
This is DIV2</div>

I really hope you guys can help me out! Thanks in advance :)

Upvotes: 3

Views: 180

Answers (2)

dgvid
dgvid

Reputation: 26633

The .delay method was added in jQuery 1.4, so if you were loading jQuery 1.3, as you indicate in a comment, then that's your problem. Your code should work correctly, as written, with 1.4 or later.

Upvotes: 2

Liam
Liam

Reputation: 29752

you need to use the callback functions so:

("div.1").fadeIn(400, function() {$("div.2").delay(800).fadeIn(400);});

in this way the fade in of div.2 will fire after div.1 fadeIn is complete

without delay

("div.1").fadeIn(400, function() {$("div.2").fadeIn(400);});

Upvotes: 2

Related Questions