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>

我有一些样式可以添加背景图像和显示块等，以使li标记并排排列，但我没有添加它们，因为我没有＆＃39 ;我想把问题写得太长。

编辑：

我的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如此简单并试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

正如手册中提到https://api.jquery.com/delay/

仅延迟队列中的后续事件;例如，这将不延迟.show（）或.hide（）的无参数形式使用效果队列。

所以你不能按照你想要的方式使用.delay()，setTimeout可能有助于你想要实现的效果，通过发送下一个要显示给函数的li来实现setTimeOut

手册中的更多内容

.delay（）方法最适合在排队的jQuery之间延迟效果。因为它是有限的 - 例如，它并没有提供一种方法取消延迟-.delay（）不能替代JavaScript的原生代码 setTimeout函数，可能更适合某些用途例。

Answer 3

您可以改为使用setTimeout（）：

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

在元素jQuery中加载延迟

3 个答案: