एनीमेशन अनुक्रम लूप jquery

Question

बनाएं मैं एक निरंतर लूपिंग एनीमेशन बनाने की कोशिश कर रहा हूं जिससे एक div img fades में और फिर आखिरी बार बाहर निकलता है जो मेरे पास अब तक है।

जावास्क्रिप्ट:

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> 

सीएसएस:

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

लाइव घ इमो: 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 मदद मिल सकती है।