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

}）;

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

2 个答案: