2011-11-29 64 views
5

的我有一個幻燈片和另一功能用下面的代碼來改變的四個盒子的樣式:jQuery的不同步

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函數的頂級幻燈片在幾次循環轉換後不同步。有沒有辦法讓這些同步?

+0

任何人都可以告訴我什麼是「fx」的可能值請... !!! –

+0

所有效果均在:http://jquery.malsup.com/cycle/ –

回答

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

這可能不是確切想要的東西,但BASICA lly,我告訴cycler立即停頓,然後在你的handler()函數中,它告訴cycler轉到下一張幻燈片。

通過這種方式,cycler將只能使用setInterval()及時進行動畫處理。您可能需要使用更多setTimeouts來調整它以獲得您想要的確切效果,但這應該可以解決同步問題。

0

唯一的機會,我看到:只有一個時間間隔,這將啓動所有的動畫的

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

這將動畫elements1每6秒和elements2之後2秒

+1

@XeeMezAsHu malsup.com/jquery/cycle/browser.html – HerrSerker