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
异步特效
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/blackant2/archive/2007/11/25/1901458.aspx
详细解决方案
EXT核心API详解(6)-Ext.Fx
热度:84 发布时间:2012-11-23 00:03:43.0
相关解决方案