fx.slide.md

一款开源强大的javascript控件

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

在元素的水平/垂直方向上应用滑动门效果.

### 备注:

- Fx.Slide 需要页面使用[标准模式](http://hsivonen.iki.fi/doctype/)的DOCTYPE

### 继承:

- [Fx][]

### 语法:

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

### 参数:

1. elements - (*element*) 目标滑动元素
2. options  - (*object*, 可选) [Fx][]的所有可选项, 以及下列可选项:

#### 可选项

1. mode    - (*string*: 默认为'vertical') 滑动模式. 可为: 'vertical' 或 'horizontal'
2. wrapper - (*element*: 默认为this.element) 允许设置其他元素作为滑动容器

#### 属性:

2. open    - (*boolean*) 滑动元素是否可见

### 示例:

	var mySlide = new Fx.Slide('container').hide().toggle().chain(function(){
		alert(mySlide.open); //显示 true.
	});

### 备注:

- 当创建滑动门特效时, 将创建一个新的元素(默认是一个div元素)作为目标滑动元素的包装元素. 包装元素将应用目标滑动元素的margin值



Fx.Slide 方法: slideIn {#Fx-Slide:slideIn}
--------------------------------------------

将元素滑入视野

### 语法:

	myFx.slideIn([mode]);

### 参数:

1. mode - (*string*, 可选) 滑动模式(可覆盖之前可选项中指定的模式).可为: 'horizontal' 或 'vertical'

### 返回值:

* (*object*) Fx.Slide实例

### 示例:

	var myFx = new Fx.Slide('myElement').slideOut().chain(function(){
		this.show().slideIn('horizontal');
	});



Fx.Slide 方法: slideOut {#Fx-Slide:slideOut}
----------------------------------------------

将元素滑出视野

### 语法:

	myFx.slideOut([mode]);

### 参数:

1. *mode* - (*string*, 可选) 滑动模式(可覆盖之前可选项中指定的模式).可为: 'horizontal' 或 'vertical'

### 返回值:

* (*object*) Fx.Slide实例

### 示例:

	var myFx = new Fx.Slide('myElement', {
		mode: 'horizontal',
		onComplete: function(){
			alert('Poof!');
		}
	}).slideOut('vertical');



Fx.Slide 方法: toggle {#Fx-Slide:toggle}
------------------------------------------

将元素滑入/滑出视野

### 语法:

	myFx.toggle([mode]);

### 参数:

1. mode - (*string*, 可选) 滑动模式(可覆盖之前可选项中指定的模式).可为: 'horizontal' 或 'vertical'

### 返回值:

* (*object*) Fx.Slide实例

### 示例:

	var myFx = new Fx.Slide('myElement', {
		duration: 1000,
		transition: Fx.Transitions.Pow.easeOut
	});

	myFx.toggle().chain(myFx.toggle);



Fx.Slide 方法: hide {#Fx-Slide:hide}
--------------------------------------

立即隐藏元素(无滑动效果)

### 语法:

	myFx.hide([mode]);

### 参数:

1. mode - (*string*, 可选) 滑动模式(可覆盖之前可选项中指定的模式). 可为: 'horizontal' 或 'vertical'

### 返回值:

* (*object*) Fx.Slide实例

### 示例:

	var myFx = new Fx.Slide('myElement', {
		duration: 'long',
		transition: Fx.Transitions.Bounce.easeOut
	});

	myFx.hide().slideIn();



Fx.Slide 方法: show {#Fx-Slide:show}
--------------------------------------

立即显示元素(无滑动效果)

### 语法:

	myFx.show([mode]);

### 参数:

1. mode - (*string*, 可选) 滑动模式(可覆盖之前可选项中指定的模式). 可为: 'horizontal' 或 'vertical'

### 返回值:

* (*object*) Fx.Slide实例

### 示例:

	var myFx = new Fx.Slide('myElement', {
		duration: 1000,
		transition: Fx.Transitions.Bounce.easeOut
	});

    //将myElement滑出视野
	myFx.slideOut().chain(function(){
	    //等待1秒后, 元素立即显示在视野中
		this.show.delay(1000, this);
	});


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

参见[Element.Properties][].

Element 属性: slide {#Element-Properties:slide}
---------------------------------------------------

为元素设置一个Fx.Slide实例

### 语法:

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

### 参数:

1. options - (*object*) Fx.Morph的可选项

### 返回值:

* (*element*) 主调元素

### 示例:

	el.set('slide', {
		duration: 'long', 
		transition: 'bounce:out'
	});
	
	el.slide('in');

### 语法:

	el.get('slide');

### 参数:

1. options - (*object*, 可选) Fx.Slide的可选项. 如果传入了该参数, 则将创建一个新的Fx.Slide实例.

### 返回值:

* (*object*) Fx.Slide实例

### 示例:

	el.set('slide', {duration: 'long', transition: 'bounce:out'});
	el.slide('in');

	el.get('slide');


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


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

将元素进行滑动

### 语法:

	myElement.slide(how);

### 参数:

1. how - (*string*, 可选, 默认为 'toggle') 可为: 'in', 'out', 'toggle', 'show', 'hide'

### 返回值:

* (*element*) 主调元素

### 示例:

	$('myElement').slide('hide').slide('in');


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