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

Вы также должны иметь свой селектор использовать идентификаторы вместо классов. Он работает намного быстрее, и с меньшей вероятностью не будет синхронизироваться. В своей теме 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 
}); 

});