Yesterday I was helping a guy with MooTools 1.2. He wanted to chain some effects on an element and, when all effects completed, to perform a simple fade in on another element.
Basically, he had a box element and an image inside that box. He wanted first to make the box growing horizontally, then vertically and finally to fade the image in.
It sounds pretty simple, and in fact it is. There are a couple of approaches to achieve it. I will not show you how new Fx work, for that you can have a nice reading at Tom’s great article. I will instead show you some of the approaches and introduce
onChainComplete.
Startup
We first instantiate our Fx.Morph, we’re going to refer to it in all the following approaches. Here we go:
// We cache image and box elements, since we're going // to use them later. var img = $('myImg'), box = $('myBox'); // We now instantiate the effect, setting 1 second as duration, Quad.easeOut as transition // and, important, we set chain as effects link. var fx = new Fx.Morph(box, {duration: 1000, transition: 'quad:out', link: 'chain'});