MooTools - delay between "each" iterations

Question

I need to set delays between "each" iteration

if (index == 3) {
    $$('.check').each(function (el, ind) {
        if (ind > 0) {
            $$('.check')[ind - 1].addClass('hide');
        };
        $$('.check')[ind].removeClass('hide'); /*here should come delay*/
    });
}

Please advice ;)

Answer 1

As Sergio said, you can use the index in the iteration for a cascading effect.

(function(){
    // don't always lookup through DOM, cache el references if they are 
    // not changing dynamically
    var checks = $$('.check'),
        index = 3;

    // ...

    if (index === 3){
        checks.each(function(el, i){
            // i truthy is enough.
            i && checks[i-1].addClass('hide');
            // use a 100ms incremental delay for each next el
            this.delay(i*100, el, 'hide');
        }, Element.prototype.removeClass);
    }
}());

the Function.prototype.delay can be applied on Element.prototype.removeClass (used as context for fun).

keep in mind that the above is broken - we can't see all your code or the intent behind it. delaying the applied removeClass will work but it will undo the addClass('hide') later so you'd end up with all elements visible.

Answer 2

As I understand you want to do a kind of highlight. You can use a native setTimeout for that. You have 2 options:

• #1 animate all looped elements at the same time
• #2 animate looped elements one at a time

option #1

if (index == 3) {
    var check = $$('.check'); // cache this, once.
    var delay = 1000; // 1 second
    check.each(function (el, ind) {
        if (ind > 0) {
            check[ind - 1].addClass('hide');
        };
        (function () {  // to lock the value of ind
            var i = ind;
            setTimeout(function () {
                check[i].removeClass('hide'); /*here should come delay*/
            }, delay);
        })();
    });
}

option #2

This case is very similar but multiplies the delay time by the index of the iteration and making animation delay/timeout bigger for each loop iteration

if (index == 3) {
    var check = $$('.check'); // cache this, once.
    var delay = 1000; // 1 second
    check.each(function (el, ind) {
        if (ind > 0) {
            check[ind - 1].addClass('hide');
        };
        (function () {  // to lock the value of ind
            var i = ind;
            setTimeout(function () {
                check[i].removeClass('hide'); /*here should come delay*/
            }, delay * i);
        })();
    });
}