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

Question

我已经搜索并尽力而为，但无法找到如何实现以下目标：

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

我当前的代码如下

JS Fiddle Link - Example

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/