Can't get .delay() working

Question

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 :)

Your code works, have you added jQuery to your page? http://jsfiddle.net/HLHuH/ — Anton, Feb 15 '13 at 14:08
Yes I have! Thanks for your help, I had jQuery 1.3 added to my website, pretty stupid. — FrK, Feb 15 '13 at 14:11
Does the fade always take exactly 800 miliseconds? What happens in different browsers and machines, callbacks are much more solid approach — Liam, Feb 15 '13 at 14:12
On behalf of @DiH "You have to remember that class names should not start with a digit. While some browsers are more forgiving than others, it's not a good practice to do it. Change classes' name to div1 and div2 and it should work well." :) — Liam, Feb 15 '13 at 14:34

score 2 · Answer 1 · answered Feb 15 '13 at 14:09

2

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

answered Feb 15 '13 at 14:09

Liam

27,717
28
128
190

You actually don't have to, the call to `delay()` ensures the first animation has finished by the time the second one starts. – Frédéric Hamidi Feb 15 '13 at 14:10
True, but I thought he wanted a gap between the first and second fade? – Liam Feb 15 '13 at 14:10
2

@Liam Which he already has. The first animation takes 400 milliseconds, the second one is delayed by 800 milliseconds, then takes a further 400 milliseconds. There should be a gap of roughly 400 milliseconds between the first ending and the second starting. – Anthony Grist Feb 15 '13 at 14:11

score 2 · Accepted Answer · answered Feb 15 '13 at 14:36

2

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.

answered Feb 15 '13 at 14:36

dgvid

26,293
5
40
57

Can't get .delay() working

2 Answers2