Tutorials Point

  Learn script.aculo.us
  script.aculo.us Resources
  Selected Reading

Copyright © 2014 by tutorialspoint

  Home     References     Discussion Forums     About TP  

script.aculo.us Scale Effects

previous next AddThis Social Bookmark Button



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]);


 new Effect.Morph(element, [options]);

Effect Specific Parameters:

This effect has following parameters in addition to common parameters.

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


<title>script.aculo.us examples</title>

   <script type="text/javascript" 
   <script type="text/javascript" 
   <script type="text/javascript">
   function MorphEffect(element){
       new Effect.Morph(element, 
       {style:'background:#f00; color:#fff;'+
              'border: 20px solid #f88; font-size:2em',

<div onclick="MorphEffect(this)">
    Click me to see the result of Morph Method


To understand it in better way you can Try it yourself.

previous next Printer Friendly