If you aren’t as excited as I am about the soon to be released Mootools 1.2, then you should check out what’s new.

The new Fx reworking looks very promising, and will make effects even simpler! Fx.Style has been renamed to Fx.Tween, and Fx.Styles has been renamed to Fx.Morph (which you may already be familiar with from the demo). Perhaps the biggest change is the ability to transition from any calculable CSS property, including clip so that will make my text color transition effect a lot easier and less hacky. Fx.Morph also allows you to morph to a selected CSS class like so:

var myMorph = new Fx.Morph('myElement');
 
//transition myElement to the properties defined in the .warning rule in my stylesheet
myMorph.start('.warning');

How awesome is that!

Chaining effects is also a lot simpler. Just pass in 'link': 'chain' and it’ll do the rest for you.

var myTween = new Fx.Tween('myElement', 'background-color', { 'link': 'chain' });
 
//fade myElement to red, then to white, then to blue
myTween.start('#c03').start('#fff').start('#369');

You can also pass in 'link':'ignore' which is equivalent to 'wait':true, or 'link':'cancel' which is equivalent to 'wait':false.

Be sure to check out the Mootools blog for future articles describing the new changes.

This entry was posted on Wednesday, October 24th, 2007 at 11:21 am and is filed under web development and tagged with fx.morph, fx.tween, mootools, new, v1.2. You can follow any responses to this entry through the RSS 2.0 feed.