Clever Geek Handbook

Can't get .delay ()

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

I want the two DIVs to disappear one after the other, but with a delay between the first and the second. 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! Thanks in advance:)

+3


source to share


2 answers


In jQuery 1.4, a method was added . delay, so if you are loading jQuery 1.3 as you point out in the comment, then your problem is. Your code should work correctly as written with 1.4 or newer.



+2


source


you need to use callback functions like so:

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

so fade in div.2

will be triggered after completion div.1

fadeIn



without delay

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


source






More articles:


All Articles