Copyright © tutorialspoint.com
This effect changes the CSS properties of an element. This 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 Scriptactulous 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 following parameters in addition to common parameters.
Option | Description |
---|---|
style | The target style of your element, writing with the standard CSS syntax, or as a hash |
<html> <head> <title>script.aculo.us examples</title> <script type="text/javascript" src="/javascript/prototype.js"></script> <script type="text/javascript" src="/javascript/scriptaculous.js?load=effects"></script> <script type="text/javascript"> function MorphEffect(element){ new Effect.Morph(element, {style:'background:#f00; color:#fff;'+ 'border: 20px solid #f88; font-size:2em', duration:0.8}); } </script> </head> <body> <div onclick="MorphEffect(this)"> Click me to see the result of Morph Method </div> </body> </html> |
To understand it in better way you can Try it yourself.
Copyright © tutorialspoint.com