用Jquery显示延时图片

show some picture with delay with Jquery

本文关键字：显示延时 Jquery      更新时间：2023-09-26

我想用延时显示一些图片。我的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>

这就是你要找的:

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

您需要更正您的setTimeout功能。

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

在jQuery中，它看起来像:

$('.item').each(function(i, o){
    $(o).addClass('show').delay(i * 300)
})
相关文章：