Animation, MethodChain & "wait" method

[Eric]

On the site, you can easily change the duration of an animation based
on the element's position in the array:

Ojay('li').animate({marginTop: {to: 40}},
function(i) { return 0.5 * (i+1); });

For a cascading effect, I like to keep the same duration, but add a
delay. My impression has been that for several methods, the parameter
is "lamda'd" so that I can either use a function to return a value (as
seen above), or pass in a value direction. This is what I'm
attempting to use, but I don't believe the "wait" method is equipped
for such a task:

$('li').wait(function(i) { return i }).animate({ left: { to: 20 } },
0.5);

Basically, for each tab, there is an n-second delay prior to the 500ms
animation. As you can tell, I'm kicking the tires on Ojay to see what
can truly be chained and what has to be placed in a loop.

[James Coglan]

For a cascading effect,  I like to keep the same duration, but add a
delay.  My impression has been that for several methods, the parameter
is "lamda'd" so that I can either use a function to return a value (as
seen above), or pass in a value direction.  This is what I'm
attempting to use, but I don't believe the "wait" method is equipped
for such a task:

$('li').wait(function(i) { return i }).animate({ left: { to: 20 } },
0.5);

Basically, for each tab, there is an n-second delay prior to the 500ms
animation.  As you can tell, I'm kicking the tires on Ojay to see what
can truly be chained and what has to be placed in a loop.

Hi Eric,

That looks like it really ought to work but in fact it doesn't. This may well be a bug -- I'll investigate and let you know how it turns out.

Best,
James

[James Coglan]

$('li').wait(function(i) { return i }).animate({ left: { to: 20 } }, 0.5);

Hi Eric,

That looks like it really ought to work but in fact it doesn't. This may well be a bug -- I'll investigate and let you know how it turns out.

Sorry, my mistake -- it's been a little while since I used wait() myself. wait() is actually a function provided by JS.MethodChain (http://jsclass.jcoglan.com/methodchain.html) and with a functional argument it uses the object's forEach() method to iterate. So, for Ojay objects, forEach() gives you the element and its position at each step, so you want:

 $('li').wait(function(element, i) { return i }).animate({ left: { to: 20 } }, 0.5);

All the best,
James