Fx.Morph

Here is the documentation for Fx.Morph.js

Fx.Morph is very similar to Fx.Tween (if you haven't read about Fx.Tween yet, you should start there), except you can alter more than one property at once. You should use this over having two Fx.Tween properties because each property will be altered in tandem with Fx.Morph. It's also less resource intensive.

var exampleFx = new Fx.Morph('fxTarget');
exampleFx.start({
	'width':[0,100],
	'height':[0,100]
});

var exampleFx = new Fx.Morph('fxTarget', {
	duration: 1000
});
exampleFx.start({
	'opacity':[0,1],
	'padding':[0,10]
});

Just like Element.tween, .morph returns an Fx.Morph. So the examples on the Fx.Tween page could look like this:

$('fxTarget').morph({
	'width':[0,100],
	'height':[0,100]
});

$('fxTarget').morph({
	'opacity':[0,1],
	'padding':[0,10]
});

As with .tween (see the Fx.Tween section for more elaboration), you can configure the effect with numerous options, regardless of which syntax you use, with the set method:

$('fxTarget').set('morph', {
	duration: 1000,
	transition: Fx.Transitions.Bounce.easeOut,
	link: 'chain'
});
$('fxTarget').morph({
	'width':0,
	'height':0
}).morph({
	'width':100,
	'height':100
});

A new trick in MooTools 1.2 is the ability to transition to and from the CSS properties defined in a CSS class.

For instance, let's say we have these two classes:

.one {
	background-color: #fff;
	color: #000;
	border: 3px solid #000;
	padding: 10px;
	width: 300px;
}
.two {
	background-color: #000;
	color: #fff;
	border: 1px solid #999;
	padding: 5px;
}

This paragraph starts off with the //.one// CSS class applied to it. Using the morph instructions below we'll transition between the two.

$('morphExample').set('morph', {
	link: 'chain'
});
$('morphExample').morph('.two').morph('.one');

This provides a very nice method to separate your design (CSS) from your interaction code (JavaScript). Doing this is a good idea for the same reason that moving your CSS (design) out of your HTML (data) is a good idea and it makes maintaining the look of your user experience easier.

NOTE: Using Fx.Morph with CSS classes only works with numerical values found in the class. If, for example, one class has display: block and the other display: none, these values will not be applied. Also note that the class itself is not applied to the element - if you execute $('morphExample').morph('.two') the element still has the class .one and does NOT have .two, even though its styles have been altered.