Show and Hide divs (with some delay) using setInte

Question

If anyone can help me , I want this js process on one of my page:

• Delay of 60 sec;
• Show my div 1 for 20 sec;
• Delay of 60 sec;
• Show my div 2 for 20 sec;
• Delay of 60 sec;
• Show my div 1 for 20 sec;
• Delay of 60 sec;
• Show my div 2 for 20 sec;
• .
• .
• continue forever...

I tried to use this solution! which I found at 'StockOverFlow' but not working correctly for me.

Thank You

Answer 1

Here's some code that will do that:

HTML:

<div id="block1"></div>
<div id="block2"></div>

Javascript:

var shortIntervalTime = 2 * 1000;
var longIntervalTime = 5 * 1000;

function cycle(id) {
    var nextId = (id == "block1") ? "block2": "block1";
    $("#" + id)
        .delay(shortIntervalTime)
        .fadeIn(500)
        .delay(longIntervalTime)
        .fadeOut(500, function() {cycle(nextId)});
}

cycle("block1");

You can set the interval times to whatever you would like - I have them set short here for demo purposes. This uses a sequence of jQuery effects and then upon the completion of the last effect on a given object, it starts the cycle over again on the other object and repeats forever.

You can see it working here: http://jsfiddle.net/jfriend00/LTRzV/.