每个迭代之间的延迟（）

Question

在Mootools中，我希望一次淡入一组div。基本上我想在每次迭代之间添加一个延迟：

$$('.someclass').each(function(el){ 
     el.set('tween', { 
     duration: 1000 
     }); 
     el.tween('opacity',0,1); 
    }); 

Answer 1

，或者你可能只是这样做....

document.getElements('.someclass').each(function(el, index) { 
    el.set('tween', { 
     duration: 1000 
    }).fade.delay(index * 1000, el, [0, 1]); 
}); 

这将启动第一个之后每次连续褪色1秒。

测试和工作1.3.2：http://jsfiddle.net/dimitar/jMdbR/

似乎打破了1.4.1：http://jsfiddle.net/dimitar/jMdbR/1/由于method overloading to the Fx.Tween instance being removed - 虽然你可以解决它通过在开始之前，设置不透明度 - 或使用.tween：

document.getElements('.someclass').each(function(el, index) { 
    el.set('tween', { 
     duration: 1000 
    }).tween.delay(index * 1000, el, ["opacity", [0, 1]]); 
}); 

http://jsfiddle.net/dimitar/jMdbR/4/为1.4.1 ver与补间工作。

Answer 2

您可以使用函数迭代循环来做到这一点。

var divs = $$(".someclass"); // Assuming this object is Array-like 

var iterator = function (elements, i) { 
    if (!elements.hasOwnProperty(i)) return; 

    var element = elements[i++]; 
    element.set("tween", {duration: 1000}); 
    element.tween("opacity", 0, 1); 

    // Note: not sure if this is the actual API to get notified when 
    // the animation completes. But this illustrates my point. 
    element.set("events", {complete: function() { 
     iterator(elements, i); 
    }}); 
} 

iterator(divs, 0); 

鉴于MooTools的提供了一个API来获取通知当动画完成后，你可以用它来使用更新的i计数器递归调用迭代器功能。