jQuery - 如何同步页面上的多个动画？

问题描述：

请完全忽略这里的设计，这是WIP。 http://marckremers.com/ltd jQuery - 如何同步页面上的多个动画？

我正在使用jquery.cycle在每个页面上动画6张卡片。我想知道是否有一种方法可以让动画同时触发，以免它们不同步？

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

感谢，马克

尼斯插件.... – jvenema 2010-11-10 16:13:28

我注意到插件页面上有能力通过点击触发效果。也许“同步”他们通过使用setTimeout并一次全部调用它们？鉴于JavaScript的单线程特性，我仍然觉得这会有缺陷。假设你不能使用$（'＃element1，＃element2，＃element3'）。cycle（...）并不是已经将它们绑定在一起。 – 2010-11-10 16:46:00

答

设置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

答

你也应该有你的选择是使用的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 
});

}）;

jQuery - 如何同步页面上的多个动画？

相关推荐