velocityJS 动画使用方法
乜钱明
常用的属性和方法 都中文注释了 相信大家一看就会明白。可以复制代码到本地直接运行看到效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{margin:0;padding:0;}
.box{width:300px;height:200px;overflow: auto;}
</style>
</head>
<body>
<div class="box">
大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国<b id="element1">sdasdas</b>大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国大中国
</div>
<button id="btn">这是动画</button>
</body>
<script src="http://www.julian.com/research/js/libs/jquery-1.11.1.js"></script>
<script src="http://www.julian.com/research/velocity/build/velocity.min.js"></script>
<script>
!(function(win,doc,$){
//$.Velocity.mock = 7; 放缓整个动画的执行过程
$('#btn').on('click',function(){
$('#element1').velocity('scroll', {
container: $('.box'), //需要滚动的元素
duration: 1800, //完成的时间
delay: 500, //延迟
//queue: false, 设置一个新动画和当前动画并行运行
//loop : 1, //循环的次数，设置为true可以 无限循环
progress: function(elements, complete, remaining, start, tweenValue){
console.log((complete * 100) + "%");
console.log(remaining + "ms remaining!");
console.log("The current tween value is " + tweenValue)
}, //进度
begin: function(){
alert("动画我要开始了");
},//动画开始执行的函数
complete: function(){
alert("动画结束了");
}
})//.velocity("reverse"); //反转动画 reverse
setTimeout(function() {
// $('#element1').velocity("finish"); //提前调用动画结束方法，让动画提前结束
// $("#element1").velocity("stop"); //让动画暂停
}, 900);
})
})(window,document,jQuery)
</script>
</html>
类似资料：