jQuery - How to sync multiple animations on a page?

Please totally ignore the design here, it's WIP. http://marckremers.com/ltd

I'm using jquery.cycle to animate 6 cards on each page. I'm wondering if there is a way I can have the animation trigger simultaneously so that they aren't out of sync?

Here the link to the plugin: http://jquery.mals开发者_如何学运维up.com/cycle/

Thanks, Marc

---

Set the timeout to 0 to disable auto advance. Then call setInterval to advance all slides at the same time.

$('.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

---

You should also have your selector be using IDs instead of classes. It runs a lot faster that way and is less likely to not be synched. In your WP theme, you can set an ID for each one by putting in id="<?php echo $post->post_name; ?>" where you declare <div class="wrapper">. If you do that, you can get rid of the i bit.

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

});