jQuery ui effects详细用法

jQuery ui 内置了一组effects，包括：blind，bounce，clip，drop，explode，fade，fold，highlight，pulsate，puff，scale，size，shake，slide，transfer这些效果

这些effect可以通过$("selector").effect(effect,[option],[speed],[callback]),或者是jQuery中包装的show和hide方法调用。其参数和effect调用相同。

这里说明下参数的含义：

effect：就是效果名称，可以是上面列举的effects之一。

option：在不同的effect中包含不同的option。

speed：可以是数值，单位是ms，也可以是"slow","normal", 和 "fast"。

callback：就是执行完动画后的回调函数。

下面就每个effect的option做一个说明:

blind:

　　mode：值为hide/show

 　　direction：值为vertical/horizontal

 

 bounce: 

 　　direction: 值为up/down/left/right

　　distance: 值为数值，默认为20

　　times: 值为数值，默认为5

　　duration：值为数值，每个弹跳的速度，默认值250ms

　　

 clip：

　　mode：值为show/hide

 　　direction：值为vertical/horizontal

 

drop

　　direction: 值为left/right/top/down

　　mode: 值为show/hide

　　distance:值为数值。

 

 explode

　　pieces： 值为数字，爆炸的块数。默认为9

　　mode: 值为show/hide/toggle

 

fade

　　mode: 值为show/hide

 

fold

　　mode：值为show/hide

　　size: 值为数值，折叠的大小，默认为15

　　horizFirst：bool值，是否先水平方向折叠

　　

highlight

　　mode: 值为show/hide

　　color: 值为颜色值，默认为#ffff99

 

pulsate

　　mode：值为show/hide

　　times:值为数值，跳动的次数

　　

puff

　　mode：值为show/hide

　　percent: 值为数值，膨胀的比例，默认为150

　　

scale

　　mode：值为show/hide

　　percent: 值为数值

　　direction：vertical/horizontal/both

　　origin：原始大小

　　from: 效果开始的大小

 

size

　　mode：值为show/hide

　　restore: bool类型，默认false

　　scale：vertical/horizontal/both

　　origin：原始大小

　　from：从一定的高度和宽度开始

　　to：到一定的高度和宽度结束

　　

shake

 　　mode：值为show/hide

　　direction: 值为left/right/up/down，默认值left

　　distance: 值为数字,默认值20

　　times：值为数字

　　duration：每次效果的速度

 　　

slide

　　mode：值为show/hide

　　direction: 值为left/right/up/down

　　distance: 值为数值

　　

transfer

　　to：目标jQuery对象

　　className: 需要添加的css样式名称.

 

jQuery ui 为我们封装了上面的一些效果，在大部分的开发中，上述的效果基本可以满足我们的需求。而不需要我们自己另行开发。此外，在jQuery ui中封装了一组easing

可以在effect中搭配easing的使用，注意easing也是上述所有effect的option中的一个option，option的名称就是easing。