Клас: Fx.Morph

Дозволяє анімацію кількох CSS властивостей одночасно, навіть за CSS селектором. Успадковує методи, властивості, опції та події від Fx.

Розширює:

• Fx

Синтаксис:

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

Аргументи:

1. element - (mixed) Рядковий ID елемента або Елемент, до якого застосовуються переходи стилів.
2. options - (object, опціонально) Об'єкт опцій Fx.

Повертає:

• (object) Новий екземпляр Fx.Morph.

Приклади:

Кілька стилів з початковими та кінцевими значеннями за допомогою об'єкта:

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.
});

Кілька стилів з пропущеним початковим значенням за замовчуванням використовують поточне значення елемента:

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.

});

Морфінг одного елемента для відповідності CSS значенням у CSS класі:

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: set

Встановлює CSS властивості елемента на вказані значення негайно.

Синтаксис:

myFx.set(to);

Аргументи:

1. properties - (mixed) Або об'єкт пар ключ/значення CSS атрибутів для зміни, або рядок, що представляє CSS селектор, який можна знайти в CSS сторінки. Якщо для будь-якої CSS властивості дано лише одне значення, перехід буде від поточного значення цієї властивості до заданого значення.

Повертає:

• (object) Цей екземпляр Fx.Morph.

Приклади:

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: start

Виконує перехід для будь-якої кількості CSS властивостей одночасно.

Синтаксис:

myFx.start(properties);

Аргументи:

1. properties - (mixed) Об'єкт пар ключ/значення CSS атрибутів для зміни або рядок, що представляє CSS селектор, який можна знайти в CSS сторінки. Якщо для будь-якої CSS властивості дано лише одне значення, перехід буде від поточного значення цієї властивості до заданого значення.

Повертає:

• (object) Цей екземпляр Fx.Morph.

Приклади:

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'

});

Примітки:

• Якщо рядок передається як CSS селектор, селектор має бути ідентичним тому, що в CSS.
• Кілька селекторів (з комами) не підтримуються.

Hash: Element.Properties

див. Element.Properties

Властивість Element: morph

Сеттер

Встановлює екземпляр Fx.Morph за замовчуванням для елемента.

Синтаксис:

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

Аргументи:

1. options - (object, опціонально) Опції Fx.Morph.

Повертає:

• (element) Цей елемент.

Приклади:

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

Геттер

Отримує екземпляр Fx.Morph за замовчуванням для елемента.

Синтаксис:

el.get('morph');

Аргументи:

1. options - (object, опціонально) Опції Fx.Morph. Якщо вони передані, буде згенерований новий екземпляр.

Повертає:

• (object) Екземпляр Fx.Morph.

Приклади:

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

Нативний: Element

Метод Element: morph

Анімує елемент з переданими властивостями.

Синтаксис:

myElement.morph(properties);

Аргументи:

1. properties - (mixed) CSS властивості для анімації. Може бути або об'єктом CSS властивостей, або рядком, що представляє CSS селектор. Якщо для будь-якої CSS властивості дано лише одне значення, перехід буде від поточного значення цієї властивості до заданого значення.

Повертає:

• (element) Цей елемент.

Приклад:

З об'єктом:

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

З селектором:

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

Див. також:

• Fx.Morph