淡入/淡出通过未知数量的 div，两者之间有延迟

Question

我已经搜索并尽力了，但找不到如何实现以下目标：

1. 循环遍历未知数量的div
2. 有某种动画（也许只是简单的宽度增长110%）
3. 每个 Div 淡入/淡出
4. 在最后一个div 淡出和第一个div 再次淡入之间有延迟

我当前的代码如下

JS小提琴链接 - 示例

.HTML

<div class="container">
    <div class="popup">Popup 1</div>
    <div class="popup r">Popup 2</div>
    <div class="popup b">Popup 3</div>
    <div class="popup g">Popup 4</div>
    <div class="popup y">Popup 5</div>
</div>

.CSS

.popup {
    display: none;
    width: 400px;
    height: 80px;
    background: #000;
    color: #fff;
    line-height: 80px;
    text-align: center;
}
.r{background:red}
.b{background:blue}
.g{background:green}
.y{background:yellow}

jQuery

var popups = $('.popup');
var i = 0;
function step() {
    if (i >= popups.length)
        i = 0;
    $(popups[i]).fadeToggle(300);
    i++;
}
setInterval(step, 2000);

如您所见，我的div 在全部显示之前不会淡出，这是不希望的。

Answer 1

您可以将动画链接在一起，delay在以下各项之间：

function next() {
    if (i >= popups.length)
        i = 0;
    popups.eq(i).fadeIn(300).delay(2500).fadeOut(300).delay(1000).queue(function(){
            next();
            $(this).dequeue();
        });
    i++;
}
next()

（注意：我用了popups.eq(i)和$(popups[i])一样）

现场示例：http://jsfiddle.net/3ujb7k4L/7/

Answer 2

像这样的东西？

var popups = $('.popup');
var i = 0;
function fadeOutLater(popup) {
    setInterval(function() {
        popup.fadeOut(500);
    }, 5000);
}
function step() {
    var popup;
    if (i >= popups.length)
        i = 0;
    popup = $(popups[i]);
    popup.fadeIn(300, fadeOutLater(popup));
    i++;
}
setInterval(step, 2000);

Answer 3

要在隐藏最后一个元素和再次显示第一个元素之间创建更长的暂停时间，您可以在重置计数器时跳过一个淡入/淡出循环：

var popups = $('.popup');
var i = 0;
function step() {
   if (i >= popups.length) {
        i = 0;
    } else {
        $(popups[i]).delay(300).fadeIn(300).delay(200).fadeOut(300).delay(200);
        i++;
    }    
}
setInterval(step, 2000);

像这里： http://jsfiddle.net/r72qpher/