jQuery fuera de sincronización

Question

I tiene una presentación de diapositivas y otra función para cambiar el estilo de un cuatro cajas con el siguiente código:

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); 


}); 

El primer cambio en la segunda función tiene que ser más rápido a continuación, establecer a 6000 milisegundos ... que funciona bien, pero la presentación de diapositivas superior que utiliza la función jQuery.cycle no se sincroniza después de algunos bucles de las transiciones. ¿Hay alguna forma de mantener estos sincronizados?

Answer 1

¿Qué tal. ..

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); 
}); 

Esto no puede ser exactamente lo que quiere, pero basica Simplemente, le dije a la cicladora que pause inmediatamente, y luego en su función de controlador, le está diciendo a la cicladora que pase a la siguiente diapositiva.

De esta manera, el ciclador solo se animará a tiempo con su setInterval(). Es posible que deba ajustar esto con un poco más de setTimeouts para obtener el efecto exacto que desea, pero esto debería solucionar el problema de sincronización.

Answer 2

única posibilidad que veo: sólo dispone de un intervalo, que comienza toda la animación

/* pseudo code */ 
function intervalFunc() { 
    $('.elements1').animate(...) 
    setTimeout(function() { 
     $('.elements2').animate(...) 
    }, 2000) 
} 
setInterval(intervalFunc, 6000) 

esto animará elements1 cada 6 segundos y elements2 después con un retraso de 2 segundos