fx.morph.md.svn-base

一款开源强大的javascript控件

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