EXT核心API详解(六)Ext.Fx

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.Element

slideOut( [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

异步特效