Displaying divs using JQuery in sequence
<p>I am trying to display 3 divs one after another. I want them to be displayed in the sequence 1,2,3,1,2,3,.... and so on..</p>

<p>This is the code I am using</p>

<pre><code>//Initially setting the divs to be hidden
$(document).ready(function(e) {
    $(".1").css("visibility","hidden");
    $(".2").css("visibility","hidden");
    $(".3").css("visibility","hidden");
    myFun();
});

var x=1;


function myFun(){
switch(x)
{       
case 1:
    $(".3").css("visibility","hidden");
    $(".2").css("visibility","hidden");
    $(".1").css("visibility","visible");
    x++;
    break;

case 2:
    $(".1").css("visibility","hidden");
    $(".3").css("visibility","hidden");
    $(".2").css("visibility","visible");
    x++;
break;

case 3:
    $(".1").css("visibility","hidden");
    $(".2").css("visibility","hidden");
    $(".3").css("visibility","visible");
    x=1;

break;

}
//this might be wrong
$(this).delay(1000,myFun());
}
</code></pre>

<p>This displays the three divs but without delay. How do I go about giving delays and calling the same function again. Is there a better way to do that.</p>
