script.aculo.us - Morph Effect

Description

This effect changes the CSS properties of an element. it 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 script.aculo.us 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 the following parameters in addition to the common parameters.

Sr.No Option & Description
1

style

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

Example

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

This will produce following result −

scriptaculous_effects.htm
Advertisements