滑块无法正常工作

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