Velocity.js笔记--适用于重视先后顺序的动画效果
基于慕课网教程的学习笔记
HTML布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="css/index-css.css" > <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/velocity.min.js"></script> <script type="text/javascript" src="js/velocity.ui.min.js"></script> </head> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> <script type="text/javascript" src="js/index-js.js"></script> </body> </html>
.one,.two,.three{width:100px;
height:100px;
background-color:#0F0;
}
实现单一的效果
*$('.one').velocity(
{width:'300px'},
{duration:3000,
//delay:1000 延时操作
}
});
实现依次进行
*$('.one').velocity(
{width:'300px'},
{duration:3000,
complete:function(){ //.one执行完成后 执行下一个操作
$('.two').velocity({
width:'300px'},
{duration:3000,
//delay:1000 延时操作
});
}
});*
使用动画序列
var seq=[
{
elements:$('.one'),
properties:{width:'300px'},
options:{duration:1000}
},
{
elements:$('.two'),
properties:{width:'300px'},
options:{duration:1000}
},
{
elements:$('.three'),
properties:{width:'300px'},
options:{duration:1000}
}
];
$.Velocity.RunSequence(seq);
使用插件自带的动画效果
$('.one').on('mouseover',function(){$(this).velocity('callout.shake');});//callout.shake是插件自带的效果
使用自定义的动画效果
$.Velocity.RegisterEffect('hq.pulse',
{ //动画的意思是三秒内把前0.5的时间用来把x轴变为原来的1.1倍，后0.5的时间变为1.0倍
defaultDuration:3000,
calls:[
[{scaleX:1.1},0.5],
[{scaleX:1.0},0.5]
]
});
$('.two').on('mouseover',function(){$(this).velocity('hq.pulse');});
将动画效果以数组的形式写在calls中
第一个参数是结束时 第二个为开始时
opacity:[0,1] 透明度变化
scale:[1,0.3] 大小的变化
translateY:[100,0] 位置的变化
附：velocity官网