애니메이션 시퀀스 루프 jquery 만들기

Question

저는 하나의 div img fades in과 마지막으로 페이드 아웃하는 연속적인 반복 애니메이션을 만들려고합니다. 이것이 제가 지금까지 가지고있는 것입니다.

자바 스크립트 :

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

라이브 D emo : jsFiddle

내가 할 필요가있는 것은 멀리 떨어져있을 수 없다고 확신합니다. 마지막으로 페이드 아웃하는 것이고 다음에 나는 시퀀스가 ​​있지만 그것을 확장하고 루프를 만들어야합니다.

Answer 1

이것은

$(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에게 도움이 될 수 있습니다.