JQuery: как я могу задержать каждый () от запуска

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

Для этого можно использовать метод 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 2

Использование некоторых новых функций 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 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


});

Answer 4

Да, вы можете, как это

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

Если это просто вопрос задержки начальной анимации, почему бы просто не начать с задержкой 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 6

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

Вот фрагмент, который я сделал специально для этой цели.Вы можете вызвать iniFadeChildren ($ ('. Parent'), 'li', 500). И все li в parent будут постепенно исчезать один за другим

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