CODEWITHSUNDEEP
jqueryanimationloops
Ben
Ben

Reputation: 83

JQuery - Can't make my animation loop restart

I'm really new to JQuery and have read a bit about loops and animating. The idea I have is to have a and have each of the <li>'s inside of it fade in and fade out before moving to the next <li>.

I have managed to get the fade in and out working but once it gets to the end it stops. What is the best way to make it start again once it reaches the end?

JQuery:

<script>
$(document).ready(function(){

$('.fader > li').hide();

var duration = 1000;

$('.fader > li').each(function(i){ $(this).delay( i * (duration * 2) ).fadeIn(duration).fadeOut(duration); } );


});
</script>

HTML

<ul class="fader">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>

Upvotes: 0

Views: 299

Answers (4)

Daedalus
Daedalus

Reputation: 7722

The following should do what you need, without problems of lag(more than one item appearing at a time):

$(document).ready(function() {

    $('.fader > li').hide();
    fade();

    function fade() {
        var duration = 1000;
        $('.fader > li').each(function(i) {
            $(this).delay(i * (duration * 2)).fadeIn(duration).fadeOut(duration, function() {
                if ((i + 1) == $('.fader > li').length) {
                    fade();
                }
            });
        });

    }

});​

Example

Upvotes: 0

VisioN
VisioN

Reputation: 145398

var len = $('.fader > li').hide().length;
var duration = 1000;

function animate(i) {
    $('.fader > li:eq(' + i++ +')').fadeIn(duration).fadeOut(duration, function() {
        animate(i == len ? 0 : i);
    });
}

animate(0);​

DEMO: http://jsfiddle.net/mW9xf/

Upvotes: 1

Jamiec
Jamiec

Reputation: 136104

Instead of doing this with the right delay its tonnes easier to use the optional callback that can be passed to fadeIn / fadeOut which gets called when the animation finishes.

You can then wrap this all up in a nice, simple plugin:

(function($){
    $.fn.cycle = function(options){
       var settings = $.extend({duration:1000},options) ;

       this.children().hide();
       doSequence(this.children(),0);        

       function doSequence ($elems, i){
           var next = (i == $elems.length-1) ? 0 : i+1;
           fadeInThenOut($elems.eq(i),function(){ doSequence($elems, next) });;       
       }
       function fadeInThenOut ($elem,callback){
           $elem.fadeIn(settings.duration,function(){
               $elem.fadeOut(settings.duration,callback);
            });
       }           
    };


})(jQuery);

Usage then becomes really simple:

$('.fader').cycle({duration:1000});

Live example: http://jsfiddle.net/VZJTL/

Upvotes: 2

strah
strah

Reputation: 6722

<script>
$(document).ready(function(){

$('.fader > li').hide();

var duration = 1000;
var t;

fade();

function fade()
{
    $('.fader > li').each(function(i){ 
        $(this).delay( i * (duration * 2) )
            .fadeIn(duration)
            .fadeOut(duration); 
    } );
    t = setTimeout(fade, 2000);

}

});
</script>

Upvotes: 1

Related Questions