javascript - 一个接一个地加载元素——简单的jQuery

Question

我有一些 JavaScript 可以根据它们的类名加载一堆单独的元素。但是，我想为每个添加 1 秒的延迟，这样它们就会一个接一个地出现。

因此 i1 先加载，然后 i2 加载，依此类推...

如何使用我的代码实现此目的？

<script>
jQuery(function($){

var i1 = $(".one"),
i2 = $(".two"),
i3 = $(".three");
i4 = $(".four");
i5 = $(".five");
i6 = $(".six");

$('.field').animate( {
marginTop:"0"
},600, function () {
i1.animate({
"opacity": 1
}),             
i2.animate({
"opacity": 1
}),     
i3.animate({
"opacity": 1
}),     
i4.animate({
"opacity": 1
})      
i5.animate({
"opacity": 1
}),     
i6.animate({
    "opacity": 1
}, 500);
});             

});
</script>

非常感谢您对此的任何帮助:)

Answer 1

你可以这样试试:-

HTML

<div class="one slide">1</div> <!-- give some common class all these-->
<div class="two slide">2</div>
<div class="three slide">3</div>
<div class="four slide">4</div>
<div class="five slide">5</div>

JS

var all = $('.slide').get(); //Get all the element to slide into an array.

function animate() {

    var elem = all.shift(); //Remove the top element from the array

   //animate it
    $(elem).animate({
        "opacity": 1
    }, function () {
        if (all.length > 0)
              window.setTimeout(animate, 1000); //set the time out after the delay of 1 sec for next element to animate.
    });
}
animate();

Demo