Extjs动画效果---Ext.Fx类

使用的是Ext.Fx类。本例中，前台只要在body里面写入<div id='e1'></div>即可，我们就以e1为例

Ext.onReady(function() {
Ext.get('e1').applyStyles({
position : 'absolute',
left : 200,
top : 200,
width : 100,
height : 100,
backgroundColor : "red"
}).slideIn("r", { //滑入
duration : 5
});
})
---------------------------------
}).slideOut("t", { //滑出
easing:'easeOut',
duration : 5,
remove:false,
useDisplay:false
});

--------------------------------
}).highlight("0000ff", { //高亮显示，然后渐隐为原始颜色
attr : 'background-color', //如果将'background-color'修改为'color' ，改变的将是字体的颜色
duration : 3,
endColor : 'ff0000'
});
-------------------------------
}).frame("ff0000",3,{duration : 3}) ; //展开一个波纹的框架
-------------------------------
}).fadeIn({ //将元素从透明渐变为不透明
endOpacity : 1,
duration : 10
});
------------------------------
}).fadeOut({ //将元素从不透明渐变为透明
endOpacity : 0,
duration : 4,
remove : false,
useDisplay : false
});
-----------------------------
}).scale(100,100,{duration : 2}); //以动画展示元素从开始的高度/宽度转换到结束的高度/宽度
-----------------------------
}).shift({ //以动画展示元素任意组合属性的改变
width : 100,//动画终止之后的宽度和高度
height : 100,
x : 0,//动画终止后的x y坐标
y : 0,
opacity : 5, //动画终止后的透明度
duration : 5 //动画持续的时间
});
---------------------------
}).ghost('b', { //将元素从视图滑出并伴随着渐隐
easing : 'easeOut',
duration : 5,
remove : false,
useDisplay : false
});
----------------------------
好了，上面是几种动画效果，试试到你的网页中去吧！
下一篇我们将Ext.Element自带的一些动画函数！