Search code examples
jquerycycledelaysequential

Jquery cycle with a delay on multiple elements on a page?

I have searched through stackoverflow (and Google) and I cannot seen to find an answer to my dilemma with jquery cycle.

I have 3 divs on a page (divA, divB, divC) each of which has multiple images in them, for use with the jQuery Cycle plugin. My desired result would be for a pause of 4 seconds, then the first image would cycle (800ms change time), followed by the second, followed by the third. At this point, everything would pause for 4 more seconds, then they would sequentially change again.

That's the goal. I tried putting them all on timeouts with a delay to start them, but any hiccup in the browser would cause them to easily get out of sync. The closest I have come so far is to do:

$.fn.cycle.defaults.speed   = 800;
$.fn.cycle.defaults.timeout = 0;
function runA() { 
 $('#divA').cycle({timeout: 4000,after:runB});
}
function runB() { 
 $('#divB').cycle('next');
}

And that definitely works, and stays in sync, for the first two divs. But at this point I'm at a loss as to how to both wait for the cycle on divB to finish and then manually cycle divC. It seems that the cycle plugin does not allow me to call both the string 'next' and set a delay in the options.

I have tried 

$('#divB').cycle('next').delay(800).siblings('#divC').cycle('next');

but both divB and divC fire the cycle at the same time. I also tried the idle plugin, but still the cycle on divB and divC fires at the same time.

Any help on this would be greatly appreciated. And if this has been previously answered somewhere, please point me in that direction. I have not been able to find it.

Solution

  • .delay() works only for functions which are queued on the FX queue. In order to use any function in combination with .delay() you could do something similar to what's described here: http://blog.project-sierra.de/archives/1559