jQuery fuori sincrono

Question

Ho una presentazione e un'altra funzione per modificare lo stile di un quattro scatole usando il codice seguente:

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


}); 

Il primo cambiamento sulla seconda funzione ha bisogno di essere più veloce quindi impostare a 6000 millisecondi ... che funziona bene, ma la presentazione principale che utilizza la funzione jQuery.cycle non è sincronizzata dopo alcuni loop delle transizioni. C'è un modo per mantenerli sincronizzati?

Answer 1

ne dite. ..

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

Questo potrebbe non essere esattamente ciò che si vuole, ma basica lly, ho detto al ciclista di fermarsi immediatamente, e poi nella tua funzione handler(), sta dicendo al ciclista di passare alla diapositiva successiva.

In questo modo il ciclista si animerà sempre in tempo con setInterval(). Potrebbe essere necessario aggiustarlo con altri setTimeout per ottenere l'effetto esatto desiderato, ma questo dovrebbe risolvere il problema di sincronizzazione.

Answer 2

unica possibilità che vedo: hanno solo un intervallo, che inizia tutto l'animazione

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

questo animerà elements1 ogni 6 secondi e elements2 poi con un ritardo di 2 secondi