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