Alternating divs after x seconds with jquery in wordpress

Question

The following code I am using works fine and it does what I want, but it just seems really sloppy and wanted to implement the 'replaceWith' function to make it cleaner.
I want to show div1 for 10 secs, hide the div, and then show div2 for 10 secs, hide the div and show div3 etc... Can someone please help me clean this up using the replaceWith function.

<script type="text/javascript">
jQuery(function($){
setTimeout(function() {
$('#below-post-block-1').hide();},
10000); 
});

jQuery(function($){
setTimeout(function() {
$('#below-post-block-2').show();},
10000); 
});

jQuery(function($){
setTimeout(function() {
$('#below-post-block-2').hide();},
20000); 
});

jQuery(function($){
setTimeout(function() {
$('#below-post-block-3').show();},
20000); 
});

</script>

Thanks in advance -Paul

Answer 1

use settimeout to get this working.

HTML

<div id="d1" style="background-color:red;height:100px"></div>
<div id="d2" style="background-color:green;height:100px;display:none"></div>
<div id="d3" style="background-color:blue;height:100px;display:none"></div>
<div id="d4" style="background-color:yellow;height:100px;display:none"></div>

check fiddle

Answer 2

There are many ways of achieving this behaviour and if you want to use replaceWith function I will show you an example: http://jsfiddle.net/Jm3Wj/1/

Javascript

var divs = [$('#a'),$('#b'),$('#c'),$('#d'),$('#e')]
var currentIndex = 0;
setInterval(function(){
    var temp  = divs[currentIndex];
    var nextIndex = currentIndex+1;
    if(nextIndex == divs.length)
        nextIndex = 0;
    divs[currentIndex].replaceWith(divs[nextIndex]);
    divs[nextIndex].show();
    console.log(nextIndex);
    divs[currentIndex] = temp;    
    currentIndex = nextIndex;

},1000);

HTML

<div id="a" class="firstDiv">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
<div id="e">e</div>

CSS

div{
    display:none;
}
.firstDiv{
     display:block;   
}