Class: Fx.Morph {#Fx-Morph}
===========================

提供一次對多個CSS屬性進行動畫特效變換的功能.

從[Fx][]繼承了所有方法,屬性,可選項和事件

### 繼承:

- [Fx][]

### 語法:

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

### 參數:

1. element - (*mixed*) 元素的id或引用
2. options - (*object*, 可選) [Fx][]類中提供的可選項

### 返回值:

* (*object*) Fx.Morph實例

### 示例:

1.多個樣式屬性的變換(指定起始值和結束值):

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

	myEffect.start({
		'height': [10, 100], //'height'樣式屬性值從10px變換至100px
		'width': [900, 300]  //'width'樣式屬性值從900px變換至300px
	});


2.多個樣式屬性的變換(省略起始值,取元素的該樣式屬性的當前值作為起始值):

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

	myEffect.start({
		'height': 100, //'height'樣式屬性值從當前值變換至100px
		'width': 300   //'width'樣式屬性值從當前值變換至300px
	});


3.多個樣式屬性的變換(使用了一個CSS樣式類,樣式類中的各個屬性和值作為變換的目標):

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

	myEffect.start('.myClassName');	//名為myClassName的樣式作為變化的目標值


### 另參考:

- [Fx][]



Fx.Morph 方法: set {#Fx-Morph:set}
------------------------------------

將元素的指定CSS屬性值立即設為指定值

### 語法:

	myFx.set(to);

### 參數:

1. properties - (*mixed*) 可以是包含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 {#Fx-Morph:start}
----------------------------------------

串聯執行多個CSS屬性的變換

### 語法:

	myFx.start(to);

### 參數:

1. properties - (*mixed*) 可以是包含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選擇器, 則該選擇器必須在頁面存在相應匹配的樣式.
- 不支持多選擇器(逗號分隔的多個選擇器)


Hash: Element.Properties {#Element-Properties}
==============================================

參見[Element.Properties](/Element/Element/#Element-Properties)

Element 屬性: morph {#Element-Properties: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');



Native: Element {#Element}
==========================

Element 方法: morph {#Element:morph}
--------------------------------------

對元素執行指定屬性值的動畫特效變換

### 語法:

	myElement.morph(properties);

### 參數:

1. properties - (*mixed*) 可以是包含CSS屬性鍵值對的對象, 或是一個CSS選擇器(必須在頁面中已定義).如果對CSS屬性只給出一個值,則變換的時候將把元素當前的屬性值作為起始值.

### 返回值:

* (*element*) 主調元素

### 示例:

使用鍵值對對象:

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

使用CSS選擇器:

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

### 另參考:

- [Fx.Morph][]



[$]: /Element/Element#dollar
[Fx]: /Fx/Fx
[Fx.Morph]: #Fx-Morph