[轉載]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
異步特效