The onChainComplete

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

5 comments - Read More »

The beginning

English

After more than a year of “maintenance mode”, I’ve finally completed my Symphony template.

We are live, baby! Question is, for how long?

Italiano

Dopo oltre un anno di “sito in mantenimento”, ho finalmente completato il template per Symphony.

Ci siamo baby, siamo live! La domanda è, per quanto tempo?

6 comments - Read More »

Tumblelog (?)

30 Jul 08

Symphony 1.7 vulnerability found in filemanager. Make sure to follow Alistair instructions to patch it.

4 Mar 08

MooTools 1.2 is VERY near, and by VERY, i mean VERY. Stay tuned!

25 Feb 08

Launching the site… Right now!