淡入/淡出通過的div未知適量，用延遲之間

Question

我搜索了四周，盡我所能，但無法找到如何實現以下目標：通過一個未知量

1. 循環的div
2. 有某種動畫（可能只是一個簡單的寬度的110％生長）
3. 每個股利淡入/在最終的div之間淡出
4. 延遲淡出和第一個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/