MooTools

How to use

Syntax

var myFx = new Fx.MorphElement(el, {options});

Arguments

1. el - (element) the id of the element or the element itself.
2. options - (options) a key/value set of options.

Options

• width: (string), the width of the element. (Default: the width of the actual element)
• height: (string), the height of the element. (Default: the height of the actual element)
• wrap: (boolean), whether to wrap the element or not. (Default: true)
• wrapClass: (string), The CSS Class name of the element wrap. (Default: 'morphElementWrap')
• FxTransition : An Fx.Transitions (object). see MooTools Fx for options. (Default: {transition: 'linear', duration, 'long'}),
• hideOnInitialize: (mixed), whether to hide the element when the class is initialize using a style from Fx.MorphElement.Effects. (Default: false)

Returns:

• (object) A new Fx.MorphElement instance.

Example:

Morphing using an object:

var myFx = new Fx.MorphElement($('me1'), {
    wrap: true,
    width: '200px',
    height: '200px',
    FxTransition:  {
        transition: 'linear',
        duration: 'long'
    },
    hideOnInitialize: 'slide:right'
});

myFx.start('slide:right');

See Also:

• Fx
• Fx.Morph

Requirements

• MooTools Core 1.2.4: Fx.Morph, Fx.Transitions (and their dependencies)

Extends:

• Fx.Morph

Fx Morphelement Method Start

Executes a transition from the Fx.MorphElement.Effects (object).

Syntax:

myFx.start(properties);

Arguments:

1. properties - (string) An string representing a CSS styles which can be found within the Fx.MorphElement.Effects (object).

Returns:

• (object) This Fx.MorphElement instance.

Examples:

var myEffects = new Fx.MorphElement('myElement', {
    wrap: true,
    width: '200px',
    height: '200px',
    FxTransition:  {
        transition: 'linear',
        duration: 'long'
    },
    hideOnInitialize: 'slide:up'
});

myEffects.start('slide:up');

Element Property Morph

Setter

Sets a default Fx.MorphElement instance for an Element.

Syntax:

el.set('morphElement', options);

Arguments:

1. options - (object) The Fx.MorphElement options.

Returns:

• (element) This Element.

Examples:

el.set('morphElement', {
    FxTransition: {
        duration: 'long',
        transition: 'bounce:out'
    }
});
el.morphElement('slide:down');

Getter

Gets the default Fx.MorphElement instance for the Element.

Syntax:

el.get('morphElement');

Arguments:

1. options - (object, optional) The Fx.MorphElement options. If these are passed in, a new instance will be generated.

Returns:

• (object) The Fx.MorphElement instance.

Examples:

el.set('morph', {
    FxTransition: {
        duration: 'long',
        transition: 'bounce:out'
    }
});
el.morphElement('blind:left');
el.get('morphElement'); //The Fx.MorphElement instance.

Element Method Morph

Animates an Element given the properties passed in.

Syntax:

myElement.morphElement(properties);

Arguments:

1. properties - (string) The CSS properties in the Fx.MorphElement.Effects (object) to animate.

Returns:

• (element) This Element.

Example:

$('myElement').morphElement('slide:left');

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.