Clovery

Effects组合效果依赖于Core Effects提供的功能，Effect模块的基本语法都具有相似性，形如Effect.Name('elem', {options})。Name是Effect对象所具有的方法，elem为要绑定效果的元素，options是用来控制效果选项的对象字面量。先来个Demo看看。Demo地址。

Effect.Appear

语法: Effect.Appear(elem [,options])

效果: 事件触发之后，元素产生渐显效果

options: options: { duration: 1.0, from: 0.0, to: 1.0 }

解释: 控制元素的opacity属性达到该效果。据官方说明：绑定改效果的元素必须在内联样式中指定display:none规则，可以用JS动态设置，也可以直接写在HTML标签中(不推荐)。所谓渐显不过是控制元素的opacity值来达到，也可以不用在内联样式中设置display:none规则，页面载入时直接把元素的透明度设为0，同样可以达到相同的效果。与之相反的效果Effect.Fade, 二者只在默认参数方面有区别。

Effect.Puff

语法: new Effect.Puff(elem [,options])

效果: 烟圈渐渐消散的效果

options: options: { duration: 1.0, from: 0.0, to: 1.0 }

Effect.DropOut

语法: Effect.DropOut(elem)

效果: 同一时间产生下降、淡出的效果

Effect.Shake

语法: Effect.Shake(elem [,options])

效果: 震动效果，左右摇晃

options: options: { duraction: 0.5, distance: 20 }

解释：distance用来设置元素左右移动的像素偏移值。

Effect.SwitchOff

语法: Effect.SwitchOff(elem)

效果: 关闭电视机的效果

Effect.BlindDown

语法: Effect.BlindDown(elem [,options])

效果: 元素以缓动效果出现，可设置options来控制效果

options: options : { scaleX: false, scaleY: true, scaleContent: true, scaleFromCenter: false, scaleMode: 'box' || 'contents', scaleFrom: 100, scaleTo: 0, duration: 1.0 }
解释: scaleX用来设置水平方向上的缓动，元素从所占据空间的左上角开始显现，然后逐渐填充直至占据全部空间。

Effect.BlindUp, Effect.SlideDown, Effect.SlideUp是与Effect.BlindDown像似的效果，options参数都相同，这里不再赘述。需要注意的是Blind与Slide之间的区别在于对内容区域的处理。BlindDown是优先显示前面的内容，视觉上来说是上部的内容，而SlideDown是优先显示后面的内容，视觉上来说是底部的内容。BlindUp和SlideUp与之相反。

Effect.Pulsate

语法: Effect.Pulsate(elem [,options])

效果: 元素有规律地闪动

options: options : { duration: 2.0, from: 0.0, pulses: 5}
pluses选项用来控制闪动次数。

Effect.Squish

语法: Effect.Squish(elem)

效果: 元素收缩至左上角，并且内容也跟着缩小，直至消失

Effect.Fold

语法: Effect.Fold(elem)

效果: 减少元素的高度到一定程度，然后滑向左侧直至消失

Effect.Grow

语法: Effect.Grow(elem [,options])

效果: 元素从某个角度扩大，直至填充所占的空间

options: options : { direction: 'center', duration: 1.0 }

说明: direction可以为center, top-left, top-right, bottom-left, bottom-right, 用来控制扩大的方向，与之相反的是
Effect.Shrink。