Tạo vòng lặp chuỗi hoạt hình jquery

Question

Tôi đang cố gắng tạo hoạt ảnh lặp liên tục theo đó một div img mờ dần và sau đó mờ dần dần cái cuối cùng đây là thứ tôi có cho đến nay.

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

Sống d emo: jsFiddle

Tôi chắc chắn điều này không thể xa mà tôi cần làm là làm mờ dần phần cuối cùng và phần tiếp theo tôi có chuỗi nhưng cần phải mở rộng và lặp lại.

Answer 1

này có thể giúp bạn

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