jQuery out of sync

Question

I have a slideshow and another function to change the style of a four boxes using the code below:

jQuery(document).ready(function() {
    jQuery('#fp-slides')
    .cycle({
        fx: 'fade',
        speed:  '2500', 
        timeout:  '3500', 
    });
    var $elements = $('#fp-menu h2 a'); 

var total_elements = $elements.length;
var element_with_class = 0;
var handler = function () {
  $elements.eq(element_with_class).removeClass('over');
  element_with_class += 1;
  if ( element_with_class === total_elements )
  {
      element_with_class = 0;
  }
  $elements.eq(element_with_class).addClass('over'); 
};
window.setTimeout( function() { 
    handler(), 
    window.setInterval(handler, 6000); 
}, 4000);


});

The first change on the second function needs to be quicker then set to 6000 milliseconds... which works fine, but the top slideshow which uses the jQuery.cycle function goes out of sync after a few loops of the transitions. Is there a way to keep these in sync?

Answer 1

How about...

jQuery(document).ready(function() {
    var slides = jQuery('#fp-slides')
    slides.cycle({
        fx: 'fade',
        speed:  '2500', 
        timeout:  '3500', 
    }).cycle('pause');

    var $elements = $('#fp-menu h2 a'); 

    var total_elements = $elements.length;
    var element_with_class = 0;
    var handler = function () {
        $elements.eq(element_with_class).removeClass('over');
        element_with_class += 1;
        if ( element_with_class === total_elements ) {
            element_with_class = 0;
        }
        $elements.eq(element_with_class).addClass('over'); 
        slides.cycle("next");
    };
    window.setTimeout( function() { 
        handler(), 
        window.setInterval(handler, 6000); 
    }, 4000);
});

This may not be exactly what you want, but basically, I've told the cycler to pause immediately, and then in your handler() function, it's telling the cycler to move to the next slide.

This way the cycler will only ever animate in time with your setInterval(). You may need to adjust this with some more setTimeouts to get the exact effect you wanted, but this ought to cure the sync issue.