Reputation: 89
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
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
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