The onChainComplete

Tue, 26 Feb 2008 14:43:00 GMT

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

The beginning

Mon, 25 Feb 2008 05:30:00 GMT

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?

An arrow through my ear

The onChainComplete

Startup

The beginning

English

Italiano