Fx.Reveal

docs

Fx.Reveal extends Fx.Morph to let you transition an element from being hidden (display:none) to visible (display:block) in a smooth way. Its .dissolve method calculates the height of the margin, padding, border, and height of the element and transitions these along with the opacity to zero. After the transition, it sets these values back to what they were and sets display to "none". .reveal does the same thing in reverse.

I'm a paragraph with padding, margin, and border values. When //dissolve// is executed, these values will go to zero, but be restored at the end of the transition when display will be set to "none"

new Fx.Reveal($('revealExample')).dissolve();

new Fx.Reveal($('revealExample')).reveal();

There's also a toggle method:

new Fx.Reveal($('revealExample')).toggle();

Element.dissolve(options) and Element.reveal(options) are just shortcuts to execute the .dissolve and .reveal methods on the "built-in" instance of Fx.Reveal (much like Element.tween is a shortcut to a "built-in" instance of Fx.Tween).

I'm a paragraph with padding, margin, and border values. When //dissolve// is executed, these values will go to zero, but be restored at the end of the transition when display will be set to "none"

$('revealExample2').dissolve();

$('revealExample2').reveal();

Like Fx.Tween or Fx.Morph, you can use Element.get and Element.set to control the "built-in" version of Fx.Reveal:

$('myElement').set('reveal', {
	duration: 1000,
	transition: 'bounce:out'
});

$('myElement').get('reveal').toggle();

This shortcut calls the dissolve method on the element and, when it completes, removes the element from the DOM. The method takes two arguments - the options to pass along to Fx.Reveal and a boolean. If true, the element will be destroyed entirely (with Element.destroy), otherwise it will be erased from the DOM (with Element.erase) - this is the default. You can specify one or both of these arguments, and the order doesn't matter. Note that in these examples, the $('fxTarget') is recreated each time.

$('fxTarget').nix(); //erase it

$('fxTarget').nix(true); //destroy

$('fxTarget').nix({duration: 1000}); 
//dissolve over 1 second, then erase

$('fxTarget').nix({duration: 1000}, true); 
//dissolve over 1 second, then destroy