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自带的一些动画函数！