如何使用.delay（）和.queue（）循环播放幻灯片？

Question

我有一个setInterval()，可以有效地循环一组淡入淡出的图像。

这是一个小提琴：http://jsfiddle.net/CBWKa/

我遇到的问题与此相同：My recursive setTimeout function speeds up when tab becomes inactive

当你将标签切换几分钟并切换回来时动画的速度几乎就像试图“赶上”自己一样。

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

有人可以帮我吗？

谢谢。

Answer 1

.delay（）和.queue（）的经典模式如下：

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

要连接动画，您还可以使用fadeIn和fadeOut中的回调参数。 E.g。

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

---

但是对于jQuery中的计时，我总是建议插件jquery-timing 。这样可以更轻松地连接不同的动画。

使用jquery-timing，只需一行即可完成完整的衰落周期代码：

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

就是这样。