Script.aculo.us: Difference between revisions

Revision as of 12:55, 2 March 2011

Revision as of 11:57, 10 May 2011

Line 24:

===Visual effects===

There are five core effects script.aculo.us offers: Opacity, Scale, MoveBy, Highlight, and Parallel. Through these effects there are over 16 additional effects using combinations of the core effects out of the box. Programmers can also extend existing and makecreate new effects.

Enabling an effect is a matter of assigning an element with an ID name and one line of code for the effect. Below is an example for the Effect.Fade effect applied to a DOM element with ID of 'id_of_element':

<source lang="javascript">

new Effect.Fade('id_of_elementelement_id');

</source>

This will cause the target ID to fade in opacity and end by setting the CSS "display" property to "none".

You can also modify various settings within the effect such as duration of the effect and range of the effect:

<source lang="javascript">

new Effect.Fade('id_of_elementelement_id', {

{ duration: 2.0,
from: 0.0,
to: 0.8
});

</source>