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

Question

I've search around and tried my best, but could not find out how to achieve the following:

1. Loop through an unknown amount of divs
2. Have some sort of animation (maybe just a simple width growth of 110%)
3. Each Div fades in/fades out
4. Delay in between the final div fading out and the first div fading in again

My Current code is as follows

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);

As you can see, my divs don't fade out until all are shown, this is not desired.

Answer 1

You can chain together animations with a delay between:

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()

(note: I have used popups.eq(i) which is the same as $(popups[i]) )

Live example: http://jsfiddle.net/3ujb7k4L/7/

Answer 2

Something like this?

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

To create a longer pause between hiding the last element and showing the first element again you could skip one fadeIn/fadeOut cycle on resetting the counter:

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);

Like here: http://jsfiddle.net/r72qpher/