This effect changes the CSS properties of an element. it takes a set of CSS properties and gradually migrates the element's relevant style values to these targets.
This effect takes a single specific option, named style. For the sake of convenience, you can express your target style definition in three ways −
As a CSS class name. The element will then morph toward the style specification for this class name.
As an inline style specification (think style = attribute values).
As a hash of CSS properties. Both official (hyphen-based) and camelized (for example, borderStyle) syntaxes are allowed for the property names.
NOTE − The original style for an element must be in its style attribute, not in an external stylesheet, for script.aculo.us to morph it.
You can use one of the following two forms to use this effect −
new Effect.Morph('id_of_element', [options]); OR new Effect.Morph(element, [options]);
This effect has the following parameters in addition to the common parameters.
|Sr.No||Option & Description|
The target style of your element, writing with the standard CSS syntax, or as a hash.
This will produce following result −