javascript - 延迟加载元素 jQuery

Question

所以我有一个 li 元素的列表，我试图将它们一个一个地加载。

因此您点击了页面，第一个使用 css transform: translateX() 从左侧移动并淡入。然后是下一个，依此类推。

我的 index.html 看起来像:

<div class="list_wrapper">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
</div>

我有一些样式可以添加背景图像和显示 block 等，以使 li 标签并排排列，但我没有添加它们，因为我不知道不想让问题太长。

编辑:

我的每个 li 标签都有样式，可以让它们更靠左，所以加载时会像这样移动它们:transform: translateX(-10%);

我的 jQuery :

$(function() {
    $('.list_wrapper li').each(function(i) {
    $(this).delay((i++) * 500).css({
      'opacity': '1',
      'transform': 'translateX(0%)'
    })
  })
});

每当我点击该页面时，它都会立即将样式添加到 li 标记中。它不会执行我试图通过的 jQuery delay。

Answer 1

为什么你不用这么简单的setTimeout试试这个

$('button').click(function(){
  $('li').each(function(i){
    setTimeout(function(){
      $('li').eq(i).css({
      	'transform': 'translateX(0%)',
        'opacity': 1
      });
    }, 1000*i)
  })
})

li{
  transition: all 0.7s ease-in-out;
  transform: translateX(-10%);
  opacity: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list_wrapper">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
</div>
<button>ok</button>