Velocity.js初识
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);
Velocity.js初识的更多相关文章
- velocity.js用法整理1
velocity.js 此框架相对于JQ的运动算法, 有很大的优势. 例如,A和B两个元素,position:absolute; top:0; 现在让A元素用JQ的animate,B用velocit ...
- JQuery动画插件Velocity.js发布：更快的动画切换速度
5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...
- Velocity.js发布：更快的动画切换速度
Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate ...
- node.js系列笔记之node.js初识《一》
node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...
- javascript动画：velocity.js学习
第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...
- Velocity.js的使用
前面的话 Velocity是一款优秀的JS动画库,完全可以作为jQuery的animate的替代品.需要动画功能时,使用Velocity是一个好选择.本文将详细介绍Velocity.js的使用 概述 ...
- jQuery动画切换引擎插件Velocity.js
Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...
- velocity.js 动画插件
1. velocity.js 插件介绍 Velocity 是独立于jQuery的,但两者可以结合使用的动画插件.用法类似 jq 的 animate ,但是支持更高级动画. ( 颜色动画.转换动画(tr ...
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
随机推荐
- Linux命令之pwd
从今天开始,我会慢慢的把学习Linux过程中的一些命令简单的介绍一下,只是简单的介绍. 我的系统是Ubantu pwd命令 用处:查看当前所在的目录 用法:直接在终端里面输入pwd就好了 示例:
- Linux命令之如何从普通用户切换至管理员用户
普通用户,标志是一个$符号 管理员用户,标志是一个#符号 我要切换,敲打命令 sudo su - 然后输入你的管理员用户的密码(输入密码的时候是不可见的) 然后你就切换到#状态了.
- 学习windows编程 day4 之视口和窗口
LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) { HDC hdc; PAINTSTRU ...
- 在同一个类中，一个方法调用另外一个有注解（比如@Async，@Transational）的方法，注解失效的原因和解决方法
参考原贴地址:https://blog.csdn.net/clementad/article/details/47339519 在同一个类中,一个方法调用另外一个有注解(比如@Async,@Trans ...
- vue.js初始学习笔记&vue-cli
笔记一下: vue.js 安装,参考: http://www.cnblogs.com/wisewrong/p/6255817.html (vue-cli) http://www.cnblogs.com ...
- Mac改键软件Karabiner使用教程
Mac改键软件Karabiner使用教程 目前Mac上比较好用的改键软件是Karabiner,不过对于最新的Sierra系统,Karabiner失效了.这里介绍的实际上是Karabiner-Eleme ...
- JavaScript之DOM概念
一.DOM概念 1.DOM是什么? 1.1 起源.DOM起源于Netscape与Microsoft 公司的DHTML(动态HTML). 1.2 名词解释.Document Object Model,文 ...
- Biorhythms HDU - 1370 （中国剩余定理）
孙子定理: 当前存在三个式子,t%3=2,t%5=3,t%7=2.然后让你求出t的值的一个通解. 具体过程:选取3和5的一个公倍数t1能够使得这个公倍数t1%7==1,然后选取3和7的一个公倍数t2使 ...
- Mac下的开发工具
1.webstrom 淘宝上2块钱就能买一个 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑 ...
- mysql启动时报错：Starting MySQL... ERROR! The server quit without updating PID file (/opt/mysql/data/mysql.pid)
mysql启动报错Starting MySQL... ERROR! The server quit without updating PID file (/opt/mysql/data/mysql.p ...