-
Notifications
You must be signed in to change notification settings - Fork 0
Effect.Morph
Core Effects > Effect.Morph
This effect changes the CSS properties of an element.
script.aculo.us V1.7 and later.
Simple:
$('morph_example').morph('background:#080; color:#fff;');
Complex:
new Effect.Morph('error_message', {
style: 'background:#f00; color:#fff; border:20px solid #f88; font-size:2em;',
duration: 0.8
});
Style as a hash (keys should be javascript names (camel-cased), rather than CSS ones i.e. backgroundColor
rather than background-color
):
new Effect.Morph('example', {
style: {
backgroundColor: '#00ff00',
height: '100px',
width: '200px'
}
});
Option | Description |
---|---|
style | the target style of your element, as a string written with the standard CSS syntax, or as a hash |
<div id="morph_demo" style="background:#cccccc; width:100px; height:100px;"></div>
<ul>
<li><a href="#" onclick="$('morph_demo').morph('background:#00ff00; width:300px;'); return false;">Click me for a demo!</a></li>
<li><a href="#" onclick="$('morph_demo').morph('background:#cccccc; width:100px;'); return false;" >Reset the demo!</a></li>
</ul>
Effect.Morph takes orginal styles given by CSS style rules or inline style attributes into consideration when calculating the transforms. It works with all length and color based CSS properties, including margins, paddings, borders, opacity and text/background colors.
Because Effect.Morph queries the original values with Prototype’s Element.getStyle API, it doesn’t matter whether these styles are set inline or in an external stylesheet definition. Of course the effect supports all usual options, like duration
or transition
.