五、Ext.Fx类
正如前面所说，Extjs的动画大部分定义在Ext.Fx中，尽管如此，Ext.Element类也定义了部分动画函数。我们先来看看Ext.Fx类中的重要方法。
1、slideIn ( [String anchor], [Object options] )：
功能：滑入效果，作动画显示。
参数：
anchor：推出的方向，定义了8种不同的方向，值不区别大小写，可选。
值
说明
tl
左上角
t
顶部中央
tr
右上角
l
左边中央
r
右边中央
bl
左下角
b
底部中央
br
右下角
options：选项配置，比较典型的是duration属性，用于定义动画持续的时间，可选。以下是默认配置：
slideIn('t', {
easing: 'easeOut',
duration: .5
});
示例：在10秒钟之内将div从右边中央滑入
5_5_1.html
<div id="a1"> slideIn </div>
5_5_1.js
Ext.onReady(function(){
Ext.get("a1").applyStyles({position: "absolute", top: 200, left: 200, backgroundColor: "red", width: 100, height: 100}).slideIn("r", {duration: 10});
})
applyStyles是Ext.Element的方法，用于定义指定元素的样式。
2、slideOut ( [String anchor], [Object options] )：滑出效果，作动画隐藏。参数及用法同上。以下是该方法的默认配置：
slideOut('t', {
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
}
);
3、highlight ( [String color], [Object options] )：根据设置的颜色高亮显示 Element 对象，然后渐隐为原始颜色。默认情况，高亮显示的背景颜色为黄色。
参数：
color：起始颜色
options：选项配置
一个能应用在项目中的典型例子是：
Ext.get("a2").applyStyles({
position: "absolute",
top: 200,
left: 300,
backgroundColor: "red",
width: 100,
height: 100}).highlight("0000ff"/*起始颜色*/,
{
attr: 'background-color', /*我们改变的是背景颜色*/
duration: 2,/*动画持续时间*/
endColor: "ff0000" /*结束颜色*/
}
);
如果可以把attr属性值改成color，我们发现颜色改变的不再是背景，而是文字颜色。endColor的颜色值不能是形如red之类的英文单词，只能是16进制表示。起始颜色为蓝色，终止颜色为红色，中间的渐变由Extjs自动完成，非常自然。
4、frame ( [String color], [Number count], [Object options] )：展示一个展开的波纹，伴随着渐隐的边框以突出显示 Element 对象。默认情况下展示的是一个淡蓝色的波纹。
参数：
color：波纹颜色
count：波纹的个数
options：选项配置
示例：三个红色的波纹并持续3秒。
Ext.get("a3").applyStyles({
position: "absolute",
top: 200,
left: 400,
backgroundColor: "red",
width: 100,
height: 100}).frame("ff0000", 3, { duration: 3 });
5、fadeIn ( [Object options] )：将元素从透明渐变为不透明。结束时的透明度可以根据"endOpacity"选项来指定。
示例：
Ext.get("a4").applyStyles({
position: "absolute",
top: 200,
left: 500,
backgroundColor: "red",
width: 100,
height: 100}).fadeIn({
endOpacity: 1, //可以是 0 到 1 之前的任意值（例如：.5）
duration: 4
});