fx.tween.md.svn-base

mooltools源码很不错的源码

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