CODEWITHSUNDEEP
javascriptmootoolsdelayeach
lowkey
lowkey

Reputation: 321

delay between iterations of each()

In Mootools i want to fade in a group of div's one at a time. Basically i want to add a delay between each iteration of each:

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

Upvotes: 0

Views: 347

Answers (2)

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

or you could just do.... 

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

this will start each successive fade 1 second after the first one.

tested and working in 1.3.2: http://jsfiddle.net/dimitar/jMdbR/

seems broken in 1.4.1: http://jsfiddle.net/dimitar/jMdbR/1/ due to the method overloading to the Fx.Tween instance being removed - though you can work around it by setting the opacity before you begin--or using .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/ for the 1.4.1 ver working with tween.

Upvotes: 2

August Lilleaas
August Lilleaas

Reputation: 54603

You can do this with a functional iterative loop.

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

Given MooTools provides an API to get notified when the animation is finished, you can use that to call the iterator function recursively with the updated i counter.

Upvotes: 0

Related Questions