Create an animation sequence loop jquery

Question

I'm trying to create a continuous looping animation whereby one div img fades in and then the next fading out the last one this is what I have so far.

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

Live demo: jsFiddle

I'm sure this can't be that far off all I need to do is fade out the last one and in the next one I have a sequence but need to expand it and make it loop.

The Alpha · Accepted Answer · 2012-09-24 17:54:51Z

6

This may help you

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

answered Sep 24, 2012 at 17:54

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1514620 Over a year ago

This works for what i need i have made some amends to the jsfiddle see here: jsfiddle.net/VStJ5/2 would it be possible to pause on hover and hide the image for the specific circle hovered over and resume on mouse out

Collectives™ on Stack Overflow

Create an animation sequence loop jquery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related