Crear un ciclo de secuencia de animación jquery

Question

Estoy tratando de crear una animación de bucle continuo mediante el cual un div img se desvanece y luego el siguiente desvanecimiento del último, esto es lo que tengo hasta ahora.

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

vivo d emo: jsFiddle

Estoy seguro de que esto no puede estar tan lejos de todo lo que necesito hacer es desvanecer el último y en el siguiente tengo una secuencia, pero necesito expandirla y hacerla circular.

Answer 1

Esto puede ayudarle a

$(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.