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

【问题标题】：jquery: how can I delay the each() from being triggeredjquery：如何延迟 each() 被触发
【发布时间】：2011-11-06 02:11:42
【问题描述】：

如何延迟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() 被触发之前延迟大约五秒钟。可行吗？

这里是link。

【问题讨论】：

标签： jquery delay each

【解决方案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;

    });


});

【讨论】：

【解决方案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); 

});

【讨论】：

【解决方案3】：

您的意思是在第一次调用之前等待 5 秒？如果是这样，请使用setTimeout setTimeout Reference

Live Demo

$(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


});

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案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; 

    }); 
)

【讨论】：

这行不通。 each 不是动画，因此不会排队。因此延迟不会延迟每个。

【解决方案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);

【讨论】：

【解决方案7】：

这是我专门为此目的做的一个 sn-p。你可以调用 iniFadeChildren($('.parent'), 'li', 500) 而parent中所有的li都会一个接一个地消失

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);
    }
}

【讨论】：

如果有人对如何改进此代码有任何想法，我们将不胜感激