Question

swinging the big bat here and going modern-only on a personal project. Elements are loaded on the page with opacity:0 and will have a class added to them that has opacity:1 and a CSS3 transition. I’m trying to cue each of the elements to fade in one after another.

Typically, I can use the below code to cue fade ins, but this uses jQuery’s .animate() method and I want higher frame rates and less CPU strain.

$('.test').each(function(i) {
    $(this).delay(i*100).animate({ opacity:1 }, 400); //CPU based!
});

Adding a class is almonst instantaneous (to us humans) and therefore the effect doesn’t do all that much.

$('.test').each(function(i) {
    $(this).delay(i*100).addClass('show'); //instant coffee!
});

The goal then is setting a timeout after the class is added so that it effectively takes the same time the original animation would. And herein lies my problem: The setTimeout() method can only be run on the window…

$('.test').each(function(i) {
    $(this).delay(i*100).setTimeout(function(){ //doesn't work!
        $(this).addClass('show');
    }, 400);
});

How can I delay each elements function and give the addClass() method some hang time?

$('.test').each(function(i) {
    var test = $(this);

    test.delay(i*100,function(){ //I wish!
        setTimeout(function(){
            test.addClass('show');
        },400);
    });
});

Answer 1

Try the following:

$('.test').each(function(i) {
    var ind = i * 100;
    var test = $(this);
    setTimeout(function(){ 
        test.addClass('show');
    }, ind);
});

or:

var $tests = $('.test')
var len = $tests.length;
var i = 0;
var test =  setInterval(function(){
                $tests.eq(i).delay(i*100).queue(function(){
                  $(this).addClass('show')
                })   
                i++;
                if (i == len) {
                    clearInterval(test)
                }
             }, 400)