jQuery ui 内置了一组effects,包括:[size=large]blind[伸展],bounce[弹跳],clip[
缩减],drop[降落],explode[爆炸],fade[褪色],fold[折叠],highlight[高亮],pulsate[跳动],puff[喷],scale[比例],size[尺寸],shake[震动],slide[滑落],transfer[渐变]这些效果[/size]

这些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。