每個迭代之間的延遲（）

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計數器遞歸調用迭代器功能。