javascript - slider 无法正常工作

Question

我正在尝试将我的列表项设置为向右动画，但它同时将所有项目设置为向右设置动画，但我希望它是一个又一个......这是我的 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()

Answer 1

您必须使用setTimeout函数在动画之间进行暂停:

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

此外，我建议尽可能使用 CSS 动画:

Example with CSS-animations