逐个翻译'li'

我希望水平移动li元素,但不能像我的代码那样同时移动所有元素.我怎样才能做到这一点？

我的代码:

$('button').click(function(){
    setTimeout(function(){
      $('li').css('transform', 'translateX(100px)');
    }, 1000)
})

见jsfiddle

您可以使用每个函数传递一个附加参数i后使用eq()函数查找当前索引然后将其移动到左侧

码:

$('button').click(function(){
  $('li').each(function(i){
    setTimeout(function(){
      $('li').eq(i).css('transform', 'translateX(100px)');
    }, 1000*i)
  })
})

更新:JSFIDDLE