延迟加载元素jQuery

所以我有一个列表li我试图去载入一个接一个的元素。延迟加载元素jQuery

所以你点击页面，第一个从左边使用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%);

我的jQuery：

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

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

来源

2016-02-25 PourMeSomeCode

你为什么不使用setTimeout如此简单，试试这个

$('button').click(function(){ 
 
    $('li').each(function(i){ 
 
    setTimeout(function(){ 
 
     $('li').eq(i).css({ 
 
     \t '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>

来源

2016-02-25 11:39:39 Gintoki

OP ..尽快接受它！ ;） – codisfy

欢呼的人！这工作。我会尽快接受答案:) code下面的答案也帮助了我。我误解了如何使用jQuery'delay'方法 – PourMeSomeCode

由于手册中提到这里

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

所以你不能使用.delay()你打算，一个setTimeout可能在你试图达到的效果帮助的方式，由下一个李发送要展示给功能setTimeOut

更多来自说明书

.delay（）方法最适合延迟排队的jQuery 效果。因为它是有限的 - 例如，它不提供一种方式来取消延迟 - .delay（）不是替代JavaScript的原生 setTimeout函数，这可能更适合某些使用的情况。

来源

2016-02-25 11:37:17 codisfy

干杯的人！这有助于澄清为什么'delay（）'没有按照我认为应该做的那样操作 – PourMeSomeCode

您可以使用的setTimeout（）代替：

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

来源

2016-02-25 11:44:39

延迟加载元素jQuery

回答

相关问题