Effect.Morph

Core Effects > Effect.Morph

This effect changes the CSS properties of an element.

Availability

script.aculo.us V1.7 and later.

Syntax

Simple:


$('morph_example').morph('background:#080; color:#fff;');

Complex:


new Effect.Morph('error_message', {
  style: 'background:#f00; color: #fff;', // CSS Properties
  duration: 0.8 // Core Effect properties
});

new Effect.Morph(‘error_message’, {
style: {
background: ‘#f00’,
color: ‘#fff’
}, // CSS Properties
duration: 0.8 // Core Effect properties
});

new Effect.Morph(‘message’, {
style: ‘error’, // CSS class name
duration: 0.8 // Core Effect properties
});

Style as a hash (keys should be javascript names (camel-cased), rather than CSS ones i.e. backgroundColor rather than background-color):

Options

Option	Description
style	the target style of your element, as a string written with the standard CSS syntax, a hash, or a CSS class name.

Demo

Source code of this demo


<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>

Details

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.

Implementation Details

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.

script.aculo.us