支持大部分CSS3属性的动画(可能要指定详细的属性值)。
var example = new Fx(element,//元素
{
form:{
// 动画前的样式
// color:"#00f",
},
to:{
// 目标样式
color: " #00f " ,
" background-color " : " #5f5 " ,
opacity: 0.9 ,
},
// 线性方法
transition:Transition.elasticInOut,
// 动画时间
duration: 5000 ,
// 动画帧值
fps: 50 ,
onAnim: function (s){
// 动画过程中
},
onStart: function (){
// 动画开始时
},
onPause: function (){
// 动画暂停时
},
onResume: function (){
// 动画恢复时
},
onStop: function (){
// 动画停止时
}
}
);
// 开始动画
example.start();
// 停止动画
example.stop();
// 停止动画并恢复到原始样式
example.stop( 1 );
// 暂停动画
example.pause();
// 恢复动画
example.resume();
form:{
// 动画前的样式
// color:"#00f",
},
to:{
// 目标样式
color: " #00f " ,
" background-color " : " #5f5 " ,
opacity: 0.9 ,
},
// 线性方法
transition:Transition.elasticInOut,
// 动画时间
duration: 5000 ,
// 动画帧值
fps: 50 ,
onAnim: function (s){
// 动画过程中
},
onStart: function (){
// 动画开始时
},
onPause: function (){
// 动画暂停时
},
onResume: function (){
// 动画恢复时
},
onStop: function (){
// 动画停止时
}
}
);
// 开始动画
example.start();
// 停止动画
example.stop();
// 停止动画并恢复到原始样式
example.stop( 1 );
// 暂停动画
example.pause();
// 恢复动画
example.resume();
Demo
下载 Fx.js (学习js时编写,有部分代码还不完善)