Class: Fx.Morph

Allows for the animation of multiple CSS properties at once, even by a CSS selector. Inherits methods, properties, options and events from Fx.

Extends:

• Fx

Синтаксис:

var myFx = new Fx.Morph(element[, options]);

Аргументы:

1. element - (mixed) A string ID of the Element or an Element to apply the style transitions to.
2. options - (object, optional) The Fx options object.

Возвращает:

• (object) A new Fx.Morph instance.

Примеры:

Multiple styles with start and end values using an object:

var myEffect = new Fx.Morph('myElement', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});

 
myEffect.start({
    'height': [10, 100], //Morphs the 'height' style from 10px to 100px.

    'width': [900, 300]  //Morphs the 'width' style from 900px to 300px.
});

Multiple styles with the start value omitted will default to the current Element's value:

var myEffect = new Fx.Morph('myElement', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});

 
myEffect.start({
    'height': 100, //Morphs the height from the current to 100px.
    'width': 300   //Morphs the width from the current to 300px.

});

Morphing one Element to match the CSS values within a CSS class:

var myEffect = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});

 
//The styles of myClassName will be applied to the target Element.
myEffect.start('.myClassName');

Смотрите также:

• Fx

Fx.Morph Method: set

Sets the Element's CSS properties to the specified values immediately.

Синтаксис:

myFx.set(to);

Аргументы:

1. properties - (mixed) Either an object of key/value pairs of CSS attributes to change or a string representing a CSS selector which can be found within the CSS of the page. If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.

Возвращает:

• (object) This Fx.Morph instance.

Примеры:

var myFx = new Fx.Morph('myElement').set({

    'height': 200,
    'width': 200,
    'background-color': '#f00',
    'opacity': 0

});
var myFx = new Fx.Morph('myElement').set('.myClass');

Fx.Morph Method: start

Executes a transition for any number of CSS properties in tandem.

Синтаксис:

myFx.start(properties);

Аргументы:

1. properties - (mixed) An object of key/value pairs of CSS attributes to change or a string representing a CSS selector which can be found within the CSS of the page. If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.

Возвращает:

• (object) This Fx.Morph instance.

Примеры:

var myEffects = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});

 
myEffects.start({
    'height': [10, 100],
    'width': [900, 300],
    'opacity': 0,
    'background-color': '#00f'

});

����������:

• If a string is passed as the CSS selector, the selector must be identical to the one within the CSS.
• Multiple selectors (with commas) are not supported.

Hash: Element.Properties

see Element.Properties

Element Property: morph

Setter

Sets a default Fx.Morph instance for an Element.

Синтаксис:

el.set('morph'[, options]);

Аргументы:

1. options - (object, optional) The Fx.Morph options.

Возвращает:

• (element) This Element.

Examples:

el.set('morph', {duration: 'long', transition: 'bounce:out'});
el.morph({height: 100, width: 100});

Getter

Gets the default Fx.Morph instance for the Element.

Синтаксис:

el.get('morph');

Аргументы:

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

Возвращает:

• (object) The Fx.Morph instance.

Examples:

el.set('morph', {duration: 'long', transition: 'bounce:out'});
el.morph({height: 100, width: 100});
el.get('morph'); //The Fx.Morph instance.

Native: Element

Element Method: morph

Animates an Element given the properties passed in.

Синтаксис:

myElement.morph(properties);

Аргументы:

1. properties - (mixed) The CSS properties to animate. Can be either an object of CSS properties or a string representing a CSS selector. If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.

Возвращает:

• (element) This Element.

Пример:

With an object:

$('myElement').morph({height: 100, width: 200});

With a selector:

$('myElement').morph('.class1');

Смотрите также:

• Fx.Morph