JQuery - Как синхронизировать несколько анимаций на странице?

Question

Пожалуйста, полностью игнорируйте дизайн здесь, это WIP. http://marckremers.com/ltd

Я использую jquery.cycle для анимации 6 карточек на каждой странице. Мне интересно, есть ли способ одновременного запуска анимации, чтобы они не синхронизировались?

Вот ссылка на плагин: http://jquery.malsup.com/cycle/

Спасибо, Marc

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

Нажмите здесь для демонстрации

Answer 2

Вы также должны иметь ваш селектор, используя идентификаторы вместо классов.Таким образом, он работает намного быстрее и с меньшей вероятностью не будет синхронизирован.В вашей теме WP вы можете установить идентификатор для каждого, вставив id="<?php echo $post->post_name; ?>", где вы объявляете <div class="wrapper">.Если вы сделаете это, вы можете избавиться от 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
 });

});