Velocity.js官网：http://julian.com/research/velocity/
兼容IE8和Android2.3
Velocity.js基本用法
效果图：
CSS
.box{
width:100px;
height:100px;
background-color:pink;
}
JS
(function($){
$('#div1').velocity({
width: '300px',
height: '300px'
},{
duration:3000 //动画的时长
});
})(jQuery);
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf8 />
<title>velocity基本用法</title>
<link rel="stylesheet" type="text/css" href="css/style.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 id="div1" class="box"></div>
<script type="text/javascript" src="js/script1.js"></script>
</body>
</html>
制作动画序列的三种方法
效果图：
CSS
.box{
width:100px;
height:100px;
background-color:pink;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf8 />
<title>制作序列动画</title>
<link rel="stylesheet" type="text/css" href="css/style.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 id="div1" class="box"></div>
<div id="div2" class="box"></div>
<script type="text/javascript" src="js/script1.js"></script>
</body>
</html>
JS
方法一：
(function($){
$('#div1').velocity({
width: '300px'
},{
duration:3000
});
$('#div2').velocity({
width: '300px'
},{
duration:3000,
delay:3000 //动画的延迟时间
});
$('#div3').velocity({
width: '300px'
},{
duration:3000,
delay:6000
});
})(jQuery);
方法二：
(function($){
$('#div1').velocity({
width:'300px'
},{
duration:3000,
complete:function(){
$('#div2').velocity({
width:'300px'
},{
duration:3000,
complete:function(){
$('#div3').velocity({
width:'300px'
},{
duration:3000
});
}
});
}
});
})(jQuery);
方法三：
(function($){
var seq = [
{
elements:$('#div1'),
properties:{width:'300px'},
options:{duration:3000}
},
{
elements:$('#div2'),
properties:{width:'300px'},
options:{duration:3000}
},
{
elements:$('#div3'),
properties:{width:'300px'},
options:{duration:3000}
}
];
$.Velocity.RunSequence(seq);
})(jQuery);
效果图：
预定义动画
(function($){
$('#div1').on('mouseover',function(){
$(this).velocity('callout.shake');
});
})(jQuery);
//callout.shake:Velocity预定义动画
更多预定义方法：http://julian.com/research/velocity/
效果图：
自定义动画
(function($){
$.Velocity.RegisterUI('HS.pulse',{ //用RegisterUI这个函数定义一个动画(也可用RegisterEffect来定义，效果一样)
defaultDuration:3000, //动画时间
calls:[
[{scaleX:1.5},0.5], //scaleX：动画在X轴的比例变化
[{scaleX:1.0},0.5] //0.5是动画时间所占用的百分比
]
});
$('#div2').on('mouseover',function(){
$(this).velocity('HS.pulse');
});
})(jQuery);