Question

我想要延迟显示一些照片。我的javascript代码工作正常，但我想将我的代码转换为jQuery。但是我的jQuery代码无法正常工作。

<div class="items hide">
    <img src="img/2.jpg" />
</div>
<div class="items hide">
    <img src="img/3jpg" />
</div>
<div class="items hide">
    <img src="img/1.jpg" />
</div>

<style>
    .items.hide {
        opacity: 0;
    }
    .items.show {
        opacity: 1;
        animation: s3 2s ease-in-out;
    }
</style>

<script>
    items = document.getElementsByClassName('items');
    function show_item(i) {
        items[i].className = items[i].className.replace('hide', 'show');
    }
    for (j = 0; j < items.length; j++) {
        setTimeout("show_item(" + j + ")", j * 300);
    }
</script>

Answer 1

您需要更正setTimeout功能。

setTimeout(function () {
    show_item(j);
}, j * 300);

Answer 2

在jQuery中，它看起来像是：

$('.item').each(function(i, o){
    $(o).addClass('show').delay(i * 300)
})

Answer 3

这就是你要找的东西：

$('.items').each(function(i, o){
    setTimeout(function() {
      $(o).addClass('show');
     }, i*300);
});

用Jquery显示一些延迟的图片

3 个答案: