CODEWITHSUNDEEP
jquery
rivitzs
rivitzs

Reputation: 499

Multiple Show Hide Divs with Jquery

I can get the first div to hide and second to show, but how would I then get the 2nd div to hide and 3rd div to show after some time?

CSS... 

 #showhide2, #showhide3{ display : none; }

Script... 

<script>
$(document).ready(function() {
    $("#showhide1").delay(10000).hide(0, function() {
        $("#showhide2").show();
    });

});
</script>

Body...

<div id="showhide1">
<p>show 1</p>
</div>

<div id="showhide2">
<p >show - 2</p>
</div>

<div id="showhide3">
<p>show 3</p>
</div>

http://jsfiddle.net/3fF4s/5/

Upvotes: 0

Views: 68

Answers (2)

Fabricator
Fabricator

Reputation: 12782

another way is using setTimeout

$(document).ready(function() {
    $("#showhide1").delay(1000).hide(0, function() {
        $("#showhide2").show();
        setTimeout(function() {
            $("#showhide2").hide();
            $("#showhide3").show();
        }, 1000);
    });
});

demo: http://jsfiddle.net/3fF4s/7/

Upvotes: 1

Adjit
Adjit

Reputation: 10305

You can do it the same way you showed the second div

http://jsfiddle.net/3fF4s/6/

$(document).ready(function() {
    $("#showhide1").delay(5000).hide(0, function() {
        $("#showhide2").show(function(){
            $(this).delay(5000).hide(0, function(){
                $('#showhide3').show();
            });
        });
    });
});

Upvotes: 1

Related Questions