新一篇: EXT核心API详解(七)-Ext.KeyNav/KeyMap/JSON/Format/DelayedTask/TaskRunner/TextMetrics/XTemplate
Ext.Fx类对于我这样的懒鬼而言,Fx类是核心类库中最激动人心的一个类,它不是最重要的,却是最实用的一个类定义了一些常用的特效方法,不妨自己多动手试试下面的方法,很有趣的fadeIn( [Object options] ) : Ext.Element渐显 options参数有以下属性callback:Function 完成后的回叫方法scope:Object 目标easing:String 行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的easeNone:匀速easeIn:开始慢且加速easeOut:开始快且减速easeBoth:开始慢且减速easeInStrong:开始慢且加速,t的四次方easeOutStrong:开始快且减速,t的四次方easeBothStrong:开始慢且减速,t的四次方elasticIn:elasticOut:elasticBoth:backIn:backOut:backBoth:bounceIn:bounceOut:bounceBoth:太多,慢慢体会吧afterCls:String 事件完成后元素的样式duration:Number 事件完成时间(以秒为单位)remove:Boolean 事件完成后元素销毁?useDisplay:Boolean 隐藏元素是否使用display或visibility属性?afterStyle:String/Object/Function 事件完成后应用样式block:Boolean 块状化?concurrent:Boolean 顺序还是同时执行?stopFx :Boolean 当前效果完成后随合的效果是否将停止和移除fadeOut( [Object options] ) : Ext.Element渐隐 fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度例:el.fadeIn({duration:5,endOpacity:0.7});frame( [String color], [Number count], [Object options] ) : Ext.Element边框变亮扩展然后渐隐例:el.frame("ff0000", 10, { duration: 3 })ghost( [String anchor], [Object options] ) : Ext.Element渐渐滑出视图,anchor定义tl 左上角(默认)t 上居中 tr 右上角l 左边界的中央c 居中r 右边界的中央bl 左下角b 下居中br 右下角例:el.ghost('b', { easing: 'easeOut', duration: .5 remove: false, useDisplay: false});hasActiveFx() : Boolean指示元素是否当前有特效正在活动hasFxBlock() : Boolean是否有特效阻塞了highlight( [String color], [Object options] ) : Ext.Element高亮显示当前元素例:el.highlight("ffff9c", { attr: "background-color", //can be any valid CSS property (attribute) that supports a color value endColor: (current color) or "ffffff", easing: 'easeIn', duration: 1});pause( Number seconds ) : Ext.Element暂停puff( [Object options] ) : Ext.Element吹,吹,吹个大气球,元素渐大并隐没例:el.puff({ easing: 'easeOut', duration: .5, remove: false, useDisplay: false});scale( Number width, Number height, [Object options] ) : Ext.Element缩放例:el.scale( [element's width], [element's height], { easing: 'easeOut', duration: .35});sequenceFx()排队特效shift( Object options ) : Ext.Element位移,并可重置大小,透明度等例:el.shift({ width: [element's width], height: [element's height], x: [element's x position], y: [element's y position], opacity: [element's opacity], easing: 'easeOut', duration: .35});slideIn( [String anchor], [Object options] ) : Ext.ElementslideOut( [String anchor], [Object options] ) : Ext.Element滑入/滑出例:el.slideIn('t', { easing: 'easeOut', duration: .5});stopFx() : Ext.Element停止特效switchOff( [Object options] ) : Ext.Element收起并隐没例:el.switchOff({ easing: 'easeIn', duration: .3, remove: false, useDisplay: false});syncFx() : Ext.Element异步特效 |