задержка между итерациями каждого () - PullRequest
0 голосов
/ 16 ноября 2011

В Mootools я хочу постепенно исчезать в группе div по одному.В основном я хочу добавить задержку между каждой итерации каждой:

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

Ответы [ 2 ]

2 голосов
/ 16 ноября 2011

или вы можете просто сделать ....

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/ из-за перегрузки метода на удаляемый экземпляр Fx.Tween - хотя вы можете обойти это, установив непрозрачностьперед началом - или с помощью .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, работающей с анимацией движения.

0 голосов
/ 16 ноября 2011

Вы можете сделать это с помощью функционального итерационного цикла.

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.

...