Class: Fx.Tween {#Fx-Tween}
===========================
對元素單個樣式屬性執行一個特效. 

它在元素上的快捷方法是[Element.tween][]

### 繼承:

[Fx][]


Fx.Tween 方法: constructor {#Fx-Tween:constructor}
--------------------------------------------

提供將元素的一個CSS屬性值從一個值向另一個值進行轉化的功能

### 語法:

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

### 參數:

1. element  - (*mixed*) 元素的id或引用
2. options  - (*object*, 可選) <Fx>類可用的所有可選項, 以及如下的可選項:
	
### 可選項:

* property - (*string*, 默認為null) 變換的目標CSS屬性,例如:'width', 'color', 'font-size', 'border'等. 如果在此省略該可選項, 則在執行start或set方法時,需要在方法的第一個參數上指定一個CSS屬性


### 備注:

- 任何可以用Element:setStyle設置的CSS屬性都可以用于Fx.Tween
- 如果不是可計算型的CSS屬性, 如border-style 或 background-image等, 則只是簡單的設置它的值
- 如果使用了property可選項, 則在調用start和set方法時就不用再指定CSS屬性

### 另參考:

- [Fx][]



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

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

### 語法:

	myFx.set(property, value);

### 參數:

1. property - (*string*) css屬性(如果之前使用了property可選項, 則該處可以省略)
2. value - (*mixed*) css屬性值

### 返回值:

* (*object*) 主調Fx.Tween實例

### 示例:

	var myFx = new Fx.Tween(element);
	myFx.set('background-color', '#f00');	//立即將背景顏色設置為紅色:

### 備注:

如果使用了property可選項, 則在調用start或set方法時就不用指定CSS屬性參數


Fx.Tween 方法: start {#Fx-Tween:start}
----------------------------------------

將元素的CSS屬性值過度到指定值

### 語法:

	myFx.start([property], from[, to]);

### 參數:

1. property - (*string*, 如果在可選項中沒有指定) 要進行變換的屬性
2. from - (*mixed*) CSS屬性起始值.如果整個方法只給出一個參數,則該值作為CSS屬性的結束值
3. to   - (*mixed*, 可選) CSS屬性結束值

### 返回值:

* (*object*) 主調Fx.Tween實例

### 示例:

	var myFx = new Fx.Tween(element);
	
	//元素的背景顏色從黑色過渡變換到紅色:
	myFx.start('background-color', '#000', '#f00');
	
	//元素的背景顏色從當前的顏色過渡變換到藍色:
	myFx.start('background-color', '#00f');

### 備注:

- 如果整個方法只給出一個參數,則該值作為CSS屬性的結束值, 起始值則從元素的當前狀態計算而來
- 當變換顏色類的CSS屬性時, 既可使用RGB格式也可以使用十六進制格式
- 如果使用了property可選項, 則在調用start或set方法時就不用指定CSS屬性參數



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

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

Element 屬性: tween {#Element-Properties:tween}
---------------------------------------------------

用于設置或獲取元素上的Fx.Tween實例

### 設置:

#### 語法:

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

#### 參數:

* options - (*object*) Fx.Tween可選項

#### 返回值:

* (*element*) 主調元素

#### 示例:

	el.set('tween', {duration: 'long'});
	el.tween('color', '#f00');

### 獲取:

#### 語法:

	el.get('tween', [options]);

#### 參數:

1. property - (*string*) 'tween'
2. options  - (*object*) Fx.Tween可選項

#### 返回值:

* (*object*) 元素對應的Fx.Tween實例

#### 示例:

	el.get('tween', {
		property: 'opacity', 
		duration: 'long'
	}).start(0);

### 備注:

- 當使用Element:set方法來設置元素的tween時, 則要進行tween的css屬性<不需要>傳入
- 當使用Element:get方法來獲取元素的Fx.Tween實例時, 則可選項中的property必須指定
- 當使用get方法時, 如果元素上還不存在tween, 則會根據給出的可選項新建一個實例設置到元素上
- 調用get方法獲取tween返回的是Fx.Tween的實例, 而調用set返回的是主調元素



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


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

元素進行特效變換的快捷方法

### 語法:

	myElement.tween(property, startvalue[, endvalue]);

### 參數:

1. property - (*string*)  CSS屬性
2. startvalue - (*mixed*) 屬性起始值
2. endvalue - (*mixed*)   屬性結束值.如果未給出該值, 則將前面給出的起始值作為結束值,而正真的起始值由元素當前狀態計算得到

### 返回值:

* (*element*) 主調元素

### 示例:

    //將myElement的寬度從當前值變換到100px:
	$('myElement').tween('width', '100');
	
	//將myElement的高度從20px變換到200px:
	$('myElement').tween('height', [20, 200]);
	
	//將myElement的border從當前狀態變換到"6px solid blue":
	$('myElement').tween('border', '6px solid #36f');
	
### 另參考:

- [Fx.Tween][]



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

對opacity樣式屬性進行tween特效變換的快捷方法

(即淡入淡出特效)

### 語法:

	myElement.fade([how]);

### 參數:

1. how - (*mixed*, 可選: 默認為'toggle') 代表不透明度的數值或字符串. 可為如下值:
 * 'in'     - opacity為100%
 * 'out'    - opacity為0%
 * 'show'   - opacity立即設置為100%
 * 'hide'   - opacity立即設置為0%
 * 'toggle' - 如果元素當前為可見狀態,則將元素淡出; 相反,則將元素淡入
 * (*number*)  - 0~1之間的浮點數. 將代入淡出到該值.

### 返回值:

* 主調元素

### 示例:

	$('myElement').fade('out'); //淡出"myElement"
	$('myElement').fade(0.7); 	//將"myElement"淡入淡出到不透明度為70%



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

對background-color樣式屬性進行tween特效變換的快捷方法.

(即背景高亮特效, 將背景顏色迅速設置為指定顏色,隨后返回到初始的背景顏色)


### 語法:

	myElement.highlight([start, end]);

### 參數:

1. start - (*string*, 可選: 默認為'#ff8') 高亮色
2. end - (*string*, 可選: 默認為元素初始的background-color值) 高亮效果結束后的元素背景顏色

### 備注:

如果未給元素指定背景色, 或指定成了'transparent', 則end值默認為白色

### 返回值:

* (*element*) 主調元素

### 示例:

    //myElement的背景將迅速變為亮籃色,然后返回到原始的顏色(或白色):
	$('myElement').highlight('#ddf');

	//myElement的背景將迅速變為亮籃色, 然后淡入淡出到灰色:
	$('myElement').highlight('#ddf', '#ccc');


[$]: /Element/Element#dollar
[Fx]: /Fx/Fx
[Fx.Tween]: #Fx-Tween
[Element.tween]: #Element-Properties:tween