小编use*_*620的帖子

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

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 …