Effect.Morph

This effect changes the CSS properties of an element.

 

Aviability

 

script.aculo.us V1.7 and later.

 

Syntax

 

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

 

 

Examples

 

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, rather than CSS ones i.e. ‘backgroundColor’ rather than ‘background-color’):

 

new Effect.Morph('example',{

  style:{

    width:'200px'

  }

});

 

You can also use $(‘element_id’).morph({width:’200px’}), which is a bit shorter.

 

Effect-specific paramters

 

Option

Description

style

the target style of your element, writing with the standard CSS syntax, or as a hash

 

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.

 

Notes

 

The original style for an element must be in its style attribute, not in an external stylesheet, for Scriptactulous to morph it.