Question

我希望水平移动li元素，但不能像我的代码那样同时移动所有元素。我怎么能这样做？

我的代码：

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

请参阅jsfiddle

Answer 1

你可以使用each函数传递一个额外的参数i之后使用eq()函数找到当前索引然后将其移到左边

代码：

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

更新：JSFIDDLE

Answer 2

你不应该依赖一些非常随机的延迟，你的动画可能会不同步。使用相关事件并添加特定类，例如：

$(function() {
  $('button').click(function() {
    $("li").on('transitionend', function(e) {
      $(this).next().addClass('animating');
    }).first().addClass('animating');
  })

});

li{
  transition: all 0.7s ease-in-out;
}
li.animating {
  transform: translateX(100px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>List</li>
  <li>List</li>
  <li>List</li>
  <li>List</li>
</ul>
<button>Move</button>

逐个翻译'li'

2 个答案: