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/

由于http://jsfiddle.net/dimitar/jMdbR/1/，

在1.4.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版本。

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计数器调用迭代器函数。

每次迭代之间的延迟（）

2 个答案: