jQuery - 如何同步頁面上的多個動畫？

Question

請完全忽略這裏的設計，這是WIP。 http://marckremers.com/ltd

我正在使用jquery.cycle在每個頁面上動畫6張卡片。我想知道是否有一種方法可以讓動畫同時觸發，以免它們不同步？

下面的鏈接插件：http://jquery.malsup.com/cycle/

感謝， 馬克

Answer 1

設置timeout爲0禁用自動前進。然後致電setInterval同時推進所有幻燈片。

$('.card_holder').cycle({ 
    fx:  'scrollVert', 
    timeout: 0     // disable auto advance 
}); 

// Cycle to the next every 4 seconds 
setInterval("$('.card_holder').cycle('next')", 4000); 

Click here for a demo

Answer 2

你也應該有你的選擇是使用的ID，而不是類。它的運行速度很快，不太可能不同步。在您的WP主題中，您可以通過在id="<?php echo $post->post_name; ?>"中聲明<div class="wrapper">來設置每個ID的ID。如果你這樣做，你可以擺脫i位。

$(document).ready(function() { 
var projectCycleIDs = ''; 
var i = 0; 

$('.wrapper').each(function() { 
    i++; 
    $(this).attr('id', i) 
    var thisProjectID = '#' + $(this).attr('id'); 
    if (projectCycleIDs == '') { 
     projectCycleIDs = thisProjectID; 
    } else { 
     projectCycleIDs = projectCycleIDs + ',' + thisProjectID; 
    } 
}); 

$(projectCycleIDs).cycle({ 
    fx:  'scrollVert', 
    sync: 1 
}); 

}）;