CODEWITHSUNDEEP
javascriptjqueryhtmlcss
dev1234
dev1234

Reputation: 5716

Show div every 3 seconds using jquery

i have these two divs and would like to know how can i display the second (box2) div every 3 seconds.

<div id="box1" style="background-color:#0000FF">
     <h3>This is a heading in a div element</h3>

    <p>This is some text in a div element.</p>
</div>
<div id="box2" style="background-color:red">
     <h3>This is a heading in a div element</h3>

how can i do this with jquery ?

i created a fiddle here. http://jsfiddle.net/jRmrp/5/

Update 1

The answer given by Khanh TO works but i am wondering what to do when div count is more than 2. it only allows for two.

Upvotes: 0

Views: 4930

Answers (2)

Khanh TO
Khanh TO

Reputation: 48972

You need this?

setInterval(function(){
     $("#box2").toggle();
    $("#box1").toggle();
},3000);

DEMO

Updated with new requirement:

var currentIndex = 0;
$(".box:not(:eq("+ currentIndex +"))").hide();

var totalDiv = $(".box").length;

setInterval(function(){
     currentIndex = (currentIndex + 1) % totalDiv;

    $(".box").hide();
     $(".box").eq(currentIndex).show();

},3000);

DEMO

Upvotes: 4

cssyphus
cssyphus

Reputation: 40078

jsFiddle demo

doBoxBlink = setInterval(blink, 1500);

function blink() {
    $('#box2').toggle();
}

Upvotes: 2

Related Questions