Show And Hide Divs (with Some Delay) Using SetInterval (infinite Loop)

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 d

Solution 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/.