class S2.FX.Morph


"Morph" DOM elements to a new set of CSS style rules, while optionally providing a new set of contents.

Preferred syntax

It is recommended to use the shorthand syntax, for example:

$('element_id').morph('width:300px;color:#fff', { duration: .7 });

Supported CSS properties

The following CSS properties are supported by this effect: background-color (color), border-bottom-color (color), border-bottom-width (length), border-left-color (color), border-left-width (length), border-right-color (color), border-right-width (length), border-spacing (length), border-top-color (color), border-top-width (length), bottom (length), color (color), font-size (length), font-weight (integer), height (length), left (length), letter-spacing (length), line-height (length), margin-bottom (length), margin-left (length), margin-right (length), margin-top (length), max-height (length), max-width (length), min-height (length), min-width (length), opacity (number), outline-color (color), outline-offset (length), outline-width (length), padding-bottom (length), padding-left (length), padding-right (length), padding-top (length), right (length), text-indent (length), top (length), width (length), word-spacing (length), z-index (integer) and zoom (number).

In addition, shorthand CSS properties for these also work:

$('element_id').setStyle('border:2px solid #cba;border-bottom-width:100px');
$('element_id').morph('border:12px solid #abc', { duration: .7 });

It is also possible to specify a S2.FX.Transition for some or all CSS properties individually for complex animation effects:

  transition: 'easeInOutExpo',
  propertyTransitions: {
    top: 'spring', left: 'easeInOutCirc'

These transitions are in addition to the main effect transition.

Try any combination of supported properties in this demo: