jquery：如何延迟each()被触发

Question

如何延迟 each() 被触发？

这是延迟每个框在给定的特定时间淡出的代码。

$(document).ready(function(){

    var delay = 0;
    $('.block-item:lt(16)').each(function(){ 

        //^^ do for every instance less than the 16th (starting at 0)
        $(this).delay(delay).animate({
            opacity:0
        },500);
        delay += 500;

    });


});

但我想在触发 each() 之前延迟大约五秒。可行吗？

这是链接。

Answer 1

如果只是延迟初始动画的问题，为什么不从延迟 5000 开始呢？

http://jsfiddle.net/QAWTy/1/

$(document).ready(function(){

    var delay = 5000;
    $('.block-item:lt(16)').each(function(){ 

        //^^ do for every instance less than the 16th (starting at 0)
        $(this).delay(delay).animate({
            opacity:0
        },500);
        delay += 500;

    });


});

Answer 2

是的，你可以，就像这样

$(document).ready(function(){

    var delay = 0;
    setTimeout(function() {
    $('.block-item:lt(16)').each(function(){ 

        //^^ do for every instance less than the 16th (starting at 0)
        $(this).delay(delay).animate({
            opacity:0
        },500);
        delay += 500;

    });

   }, 5000); 

});

Answer 3

您的意思是在首次呼叫每个人之前等待 5 秒钟吗？如果是这样，请使用 setTimeout setTimeout 参考

现场演示

$(document).ready(function(){

    var delay = 0;
    // Wrap the function with setTimeout
    setTimeout(function(){
        $('.block-item:lt(16)').each(function(){ 

            //^^ do for every instance less than the 16th (starting at 0)
            $(this).delay(delay).animate({
                opacity:0
            },500);
            delay += 500;
        });
    }, 5000); // 5000 = 5 seconds


});

Answer 4

您可以使用 setInterval 方法来实现此目的。

$(document).ready(function(){
    var count = 0;
    var $blockItems = $('.block-item:lt(16)');
    var timer;
    timer = setInterval(function(){
               if(count == 16){ 
                  clearInterval(timer);
                  return;
               }
               $blockItems.eq(count).animate({
                 opacity:0
               },500);
               count++;
            }, 500);
});

Answer 5

$('.block-item:lt(16)').delay(delay).each(function(){  

        //^^ do for every instance less than the 16th (starting at 0) 
        $(this).animate({ 
            opacity:0 
        },500); 
        delay += 500; 

    }); 
)

Answer 6

利用一些新功能http://jsfiddle.net/7czu4/

function HideItems(items, delay) {
    $(items[0]).fadeOut()
        .delay(delay)
        .promise()
        .done(function() {
            items.splice(0, 1);
            if (items.length > 0)
            {
                HideItems(items, delay);    
            }            
    });       
}

var items = $(".item");

HideItems(items, 5000);

Answer 7

这是我专门为此目的制作的一个片段。
您可以调用 iniFadeChildren($('.parent'), 'li', 500)
而父母身上的所有的礼，都会一个接一个地消逝

function iniFadeChildren(pParent, pChildrenType, pDelay, pSpeed){
    pParent.find(pChildrenType).css({display:'none'});
    if(!pChildrenType){pChildrenType='*'} if(!pDelay){pDelay=200} if(!pSpeed){pSpeed=300}
    fadeChildren(pParent, pChildrenType, pDelay, 0, pParent.children(pChildrenType).length, pSpeed);
}

function fadeChildren(pParent, pChildrenType, pDelay, pNbr, pTotal, pSpeed){
    pParent.find(pChildrenType).eq(pNbr).fadeIn(pSpeed);
    pNbr++;
    if(pNbr!=pTotal){
        var command='fadeChildren('+pParent+', '+pChildrenType+', '+pDelay+', '+pNbr+', '+pTotal+')';
        t=setTimeout(function(){fadeChildren(pParent, pChildrenType, pDelay, pNbr, pTotal, pSpeed)}, pDelay);
    }
}