Bir animasyon dizisi döngüsü oluşturma jquery

Question

Sürekli bir döngü animasyonu oluşturmaya çalışıyorum, böylece bir div img kayboluyor ve sonra da sonuncu olanın sönmesi, şu ana kadar sahip olduğum şey.

JavaScript:

function fadeLoop() { 
    $(".circle img").each(function(index) { 
     $(this).delay(1000*index).fadeIn(500); 
    }); 
}; 

$('.circle').delay(2000).fadeIn(2000,function() {   
    fadeLoop(); 
}); 

HTML:

<div class="circle" id="first-circle"> 
    <img src="test.jpg"/> 
    <a href="">ART</a> 
</div> 
<div class="circle" id="second-circle"> 
    <img src="test.jpg"/> 
    <a href="">FASHION</a> 
</div> 
<div class="circle" id="third-circle"> 
    <img src="test.jpg"/> 
    <a href="">DECOR</a> 
</div> 

CSS:

.circle { border-radius:300px; width:300px; border:5px solid #ccc; height:300px;margin:10px; padding:0px; float:left; display:none; position:relative; } 
.circle a { position:relative; z-index:999; margin:0 auto; line-height:300px; display:block; width:300px; text-align:center; font-family: sans-serif; font-weight:normal; text-transform:capitalize; color:#fff; font-size:60px; text-decoration:none; } 
#first-circle img, #second-circle img, #third-circle img { display:none; } 
#first-circle { background:#803131; } 
#second-circle { background:#751c20; } 
#third-circle { background:#803131; } 
#first-circle img { border-radius:300px; width:300px; height:300px; position:absolute; top:0px; left:0px;} 
#second-circle img { border-radius:300px; width:300px; height:300px; position:absolute; top:0px; left:0px;} 
#third-circle img { border-radius:300px; width:300px; height:300px; position:absolute; top:0px; left:0px;} 

Canlı d emo: jsFiddle

Eminim ki, bu kadar uzak olamam, sonuncusu yok etmem ve bir sonraki sırada bir dizim var, ancak bunu genişletmem ve döngü yapmam gerekiyor.

Answer 1

Bu size

$(function(){ 
    (function(){ 
     var circles=$('.circle'), i=0; 
     function shuffle() 
     { 
      $(circles[i]).fadeIn(2000, function(){ 
       i=(i < circles.length-1) ? (i+1) : 0; 
       setTimeout(function(){ 
        $('.circle').fadeOut(2000); 
        shuffle(); 
       }, 2000); 
      }); 
     } 
     shuffle(); 
    })(); 
});​ 

DEMO yardımcı olabilir.