CODEWITHSUNDEEP
javascriptjquery
Toni Reese
Toni Reese

Reputation: 69

slider won't work properly

I am trying to animate my list item towards right but it animate all item towards right at once but I want it to be one after another ..here is my jQuery 

var I,
    total_slide = $('#slide li').length,
    slide = $('#slide li');

function run() {
  for (I = 1; I <= total_slide; I++) {
    var total = total_slide - I
    $(slide).eq(total).animate({
      left: '700px'
    }, 4000);
  }
}

run()

Upvotes: 0

Views: 52

Answers (1)

Rango
Rango

Reputation: 3907

You have to use setTimeout function to make pauses between animations:

function run(){
    var timeout = 0, delay = 4000;
    $("#slide li").each(function(){
        var $li = $(this);
        setTimeout(function(){
            $li.animate({ left: 700 }, delay);
        }, timeout);
        timeout += delay;
    });
}

Example

Also I would recommend to use CSS-animations whenever it's possible:

Example with CSS-animations

Upvotes: 1

Related Questions