延迟加载jQuery元素

Question

所以我有一个li元素列表，我试图一一加载。

因此，您点击了该页面，第一个使用css transform: translateX()进入transform: translateX()从左侧移入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标签并排排列，但是我没有添加它们，因为我不想让这个问题过长。

编辑：

我的每个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> 

Answer 2

正如手册在这里提到的https://api.jquery.com/delay/

只有队列中的后续事件才被延迟； 例如，这不会延迟不使用效果队列的.show（）或.hide（）的无参数形式。

因此，您无法按.delay()的方式使用.delay() ， setTimeout可能会通过向setTimeOut的函数发送下一个要显示的li来帮助您尝试实现的效果

手册中的更多内容

.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);
});