jquery - 以时间间隔一张一张隐藏一组图像

Question

我在 div 块中收集了图像

我想间隔一段时间将它们一一隐藏。

我试过这个脚本。

$(document).ready(function () {
    delayInSeconds = 1;
    i = 0;
    setInterval(function () {
        while (i < 10) {
            $(".images").eq(i).hide();
            i++;
        }
    }, delayInSeconds * 50);
});

Answer 1

那是因为在i第一次迭代开始时 的值是 10。

解决它的一种方法是：

...
function hideOne(i) {
    $(".images").eq(i).hide();
    if($(".images").eq(i+1).length > 0) { // or change to if(i+1 < 10) if you're sure
        setTimeout(function() { 
            hideOne(i+1);
        }, delayInSeconds * 1000); // given the variable name, the multiplier should be 1000, i believe
    }
}

hideOne(0); // start it
...

Answer 2

$(document).ready(function () {
 $(".images").each(function(){
  setTimeOut($(this).hide(),300);
 });
});     

这应该这样做。希望对你有帮助

Answer 3

这会做到的。它利用:visible选择器丢弃隐藏的图像，并利用:eq(0)选择器从匹配集中抓取单个元素。

演示

var delayInSeconds = 1;

function hide(){
    setTimeout(function(){
        var images = $('.images:visible:eq(0)');
        if(images.length == 1){
            images.hide();
            hide();
        }

    }, 1000 * delayInSeconds);
}

$(document).ready(function(){
    hide();
});