0

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

Community
  • 1
  • 1
Rehan Arshad
  • 350
  • 3
  • 13

1 Answers1

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

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Thanks 'jfriend00' for the quick reply. I was busy during the last couple of days so ran the code today and also saw the demo. The only thing which I want to know that why it is taking 2 seconds more to hide while running 'longIntervalTime', if it is set to 7500 then it fads out at 9500. You can notice it in your demo. Excuse my poor English. – Rehan Arshad Nov 02 '11 at 13:14
  • The times are cumulative. In the demo, it's a 2.5 second delay, 0.5 second fadeIn, 7.5 second delay, 0.5 second fadeOut. – jfriend00 Nov 02 '11 at 14:09
  • o' hmm ! 1 more question, the timer in the demo starts from 0 , is it possible to get it going in opposite direction (like 7.5 to 0)? – Rehan Arshad Nov 02 '11 at 14:41