Fx.MorphElement 1.0.3

A Hash (object) that holds all the styles for the effect to transition.

Styles already defined

  • blind:up
  • blind:down
  • blind:left
  • blind:right
  • slide:up
  • slide:down
  • slide:left
  • slide:right
  • fade


Details

Author
Shaun Freeman
Current version
1.0.3
GitHub
vincentbluff/Fx.MorphElement
Downloads
8113
Category
Effects
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.2.4:
    • Fx.Morph
    • Fx.Transitions

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:


Requirements

Extends:


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.

blog comments powered by Disqus