Question

我有一个幻灯片和另一个功能，可以使用下面的代码更改四个方框的样式：

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


});

第二个函数的第一个更改需要更快，然后设置为6000毫秒...这很好，但使用jQuery.cycle函数的顶级幻灯片在转换的几个循环后不同步。有没有办法让它们保持同步？

Answer 1

怎么样......

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

这可能不是完全你想要什么，但基本上，我告诉循环器立即暂停，然后在你的handler（）函数中，它告诉循环器移动到下一个滑动。

这样循环器只会在你的setInterval（）中及时生成动画。您可能需要使用更多的setTimeouts来调整它以获得您想要的确切效果，但这应该可以解决同步问题。

Answer 2

我只看到机会：只有一个Interval，它启动所有动画

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

这将每隔6秒动画elements1，之后elements2动画，延迟2秒

jQuery不同步

2 个答案: