如何使用 .delay() 和 .queue() 循环播放幻灯片？答案

【问题标题】：How to loop a slideshow using .delay() and .queue()?如何使用 .delay() 和 .queue() 循环播放幻灯片？
【发布时间】：2012-04-10 19:58:03
【问题描述】：

我有一个setInterval()，它有效地循环了一组相互叠加淡入淡出的图像。

当您切换标签页几分钟然后再切换回来时，动画会急剧加速，几乎就像它试图“赶上”自己一样。

所以我了解到解决此问题的最佳方法是使用.delay() 和.queue() 而不是javascript 的setTimeout 和setInterval 函数。但是，我不知道如何使用这两个函数在几个元素（不仅仅是一个）上创建循环动画函数。

谁能帮帮我？

谢谢。

【问题讨论】：

【解决方案1】：

带有 .delay() 和 .queue() 的经典模式是这样工作的：

$('element').animate(…).delay(timeout).queue(function(next){
    // do whatever you like after the timeout;
    next();
});

要连接动画，您还可以使用fadeIn 和fadeOut 的回调参数。例如

$('some').delay(timeout).fadeOut('slow', function(){
    // do something after fading
});

不过，对于 jQuery 中的计时内容，我始终推荐 plugin jquery-timing。这样可以更轻松地连接不同的动画。

使用 jquery-timing 只需一行代码即可完成完整的褪色循环代码：

$('.slides img').repeat().each($).fadeIn().wait(2000).fadeOut();

就是这样。

【讨论】：