Question

I’m using MooTools and I’ve got the following code that I can’t seem to get to execute. I’m expecting it to increase the width of the #bar element to 50px, then alert() with a “hi!”, and then continue increasing the width of #bar to 200px. For whatever reason, it stops after “hi!” and won’t continue to execute. What’s up?

var myFx = new Fx.Tween($('bar'), {
duration: '500ms',
transition: 'sine:out',
link: 'chain'
});

myFx.start('width', '50').chain(
function() { alert('hi!'); },
function() { myFx.start('width', '200'); }
);

Fiddle
​

Answer 1

that’s because your 2nd function does not call a method of the myFx class – which means, it won’t advance the chain.

chain is a mixin into the Fx class. if you do an animation, it will auto try to callChain. since you do nothing of the sort, add this underneath the alert:

this.callChain();

this will work fine. perhaps the docs need changing as it’s not obvious right now. http://jsfiddle.net/dimitar/nUWsU/8/