间隔设置相同类名的多个元素

Question

我的页面上有一堆图片，它们每5秒就会淡入、延迟一会儿，然后又淡出。

由于所有的类都同时闪烁，所以看起来有点奇怪。

有没有办法让每个间隔在前一个执行500毫秒后再执行？或者偏移每个间隔？

这里是将它们全部同时闪烁的代码：

  setInterval(function() {
        $(".some_class").fadeIn(500).delay(2000).fadeOut(500);
  }, 5000);

这是一个JSFiddle链接，它展示了两个元素同时闪烁的效果。 http://jsfiddle.net/Vds5f/ 谢谢。

- flash_guy

---

已更新并附上了一个 jsfiddle。http://jsfiddle.net/Vds5f/ - flash_guy

请问在哪里可以找到一次只淡出一张图片的代码？在你的示例中，所有的图片都同时消失了。 - codingrose

这就是我所说的。我正在尝试找出一种干净的方法，使每个间隔略有不同。 - flash_guy

请尝试访问此链接：http://jsfiddle.net/aamir/Vds5f/1/ - Aamir Afridi

Answer 1

基于Aamir的示例，我使用了以下内容来创建交错式走马灯以切换图片而不是简单的淡入淡出。应该具有对窗口更改等情况的强大时间控制（尽管我不确定这是否符合您的要求...）

http://jsfiddle.net/Vds5f/5/

我认为将函数cycleImages从setInterval中分离出来有助于保持一致性：

var $start = +new Date, $ct = 0;
setInterval(function(){
    ++$ct;
    var $frame = (($ct-1)%4+1);
    cycleImages($frame);
}, $i);

- corg