在元素 jQuery 中加载延迟

Delay on loading in elements jQuery

本文关键字：加载 延迟 jQuery 元素      更新时间：2023-09-26

所以我有一个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标签并排排列，但我没有添加它们，因为我不想让问题太长。

编辑：

我的每个li标签都有样式，可以进一步向左启动它们，因此加载会像这样移动它们：transform: translateX(-10%);

我的j查询： 

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

每当我点击页面时，它都会立即将样式添加到li标签中。它不执行我尝试传递的 jQuery delay。

为什么你不使用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>

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

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

因此，您不能按照您打算的方式使用.delay()，setTimeout可能会通过发送下一个 li 以显示给函数来

帮助您实现setTimeOut

手册中的更多内容

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

你可以改用 setTimeout（）：

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