Question

我需要在＆＃34;每个＆＃34;之间设置延迟。迭代

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

请建议;）

Answer 1

正如Sergio所说，您可以在迭代中使用索引来实现级联效果。

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

Function.prototype.delay可以应用于Element.prototype.removeClass（用作乐趣的上下文）。

请记住以上内容已被破坏 - 我们无法看到您的所有代码或其背后的意图。延迟已应用的removeClass会有效但稍后会撤消addClass('hide')，因此您最终会看到所有元素。

Answer 2

据我了解你想做a kind of highlight。您可以使用原生setTimeout。您有两个选择：

＃1同时为所有循环元素设置动画
＃2一次一个地为一个循环元素设置动画

选项＃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);
        })();
    });
}

选项＃2

这种情况非常相似，但将延迟时间乘以迭代索引，并使每次循环迭代的动画延迟/超时更大

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

MooTools - 每个＆＃34;之间的延迟＆＃34;迭代

2 个答案:

选项＃1

选项＃2