Javascript 创建动画序列循环jquery

我正在尝试创建一个连续的循环动画，其中一个div img淡入，然后下一个淡出最后一个，这就是我到目前为止所做的

JavaScript:

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

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

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

HTML:

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

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

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

现场演示：

我相信这不会太远，我需要做的就是淡出最后一个，在下一个中我有一个序列，但需要扩展它并使其循环。

这可能会对您有所帮助

$(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();
    })();
});​

$（函数（）{
（功能（）{
变量圆=$（'.circle'），i=0；
函数shuffle（）
{
$（圆圈[i]）.fadeIn（2000年，函数（）{
i=（i

---

.

这正是我所需要的。我对JSFIDLE做了一些修改。请看这里：是否可以暂停悬停并隐藏悬停的特定圆圈的图像，然后在鼠标悬停时继续