2

How can I delay each() from being triggered?

This is the code that delays each box from fading out at certain time given.

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

    });


});

But I want to delay about five second before the each() is triggered. Is it feasible?

Here is the link.

0

7 Answers 7

0

If it is just a matter of delaying the initial animation, why not just start with a 5000 delay?

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;

    });


});
0
0

Yes you can, like this

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

});
0
0

Do you mean wait 5 seconds just before the initial call to each? If so use 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


});
0

You can use setInterval method to achieve this.

$(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);
});
0
$('.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; 

    }); 
)
1
  • This will not work. each is not an animation so it will not be queued. Therefore delay will not delay the each. Aug 29, 2011 at 14:47
0

Making use of some new features 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);
0

Here is a snippet I did specially for this purpose. You can call iniFadeChildren($('.parent'), 'li', 500) And all the li in parent are gonna fade one after another

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);
    }
}
1
  • If anyone have ideas on how to improve this code, that will be appreciated Aug 29, 2011 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.