Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM
|
script.aculo.us Scale Effects
Description:
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.
Syntax:
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]);
|
Effect Specific Parameters:
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 |
Example:
<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.
|
|
|