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,这样可以动态设置样 ...
随机推荐
- tomcat配置好后，启动eclipse中的server，不能出现有猫的页面，提示404
原因:tomcat与eclipse中的server未关联起来 解决办法:双击servers中的server,在Server Locations中选中第二项,保存之后再进行刚才的操作就好了.
- Java编程思想 学习笔记4
四.控制执行流程 1.true和false 所有条件语句都利用条件表达式的真或假来决定执行路径.注意Java不允许我们将一个数字作为布尔值使用. 2.if-else 3.迭代 while.do-whi ...
- Nginx 学习笔记（四）nginx-module-vts模块
看看已经搭建好的效果图 1.基本信息 2.过滤信息 3.上游服务器 4.其他进程 1.获取组区域(默认返回json格式数据) (1)mainZones https://www.tinywan.com/ ...
- The android command is deprecated
新版的SDK tools中的android命令已经不支持 android create project,用起来很不顺手. The "android" command is depr ...
- offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()
开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...
- jsp中的JSTL与EL表达式用法
JSTL (JSP Standard Tag Library ,JSP标准标签库) JSTL标签库分为5类:JSTL核心标签库.JSTL函数标签库.数据库标签库.I18N格式化标签库.XML标签库. ...
- Dubbo服务超时
服务消费者引用服务提供者的服务时可能由于网络原因导致长时间未返回相应,此时大量的线程将会阻塞,引起性能下降等问题.可以通过引入服务超时来解决该问题 服务超时指服务在给定的时间内未返回相应将立即终止该请 ...
- 【C++】获取URL中主机域名
// ConsoleApplication1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <windows.h& ...
- 【转】Python数据类型之“序列概述与基本序列类型(Basic Sequences)”
[转]Python数据类型之“序列概述与基本序列类型(Basic Sequences)” 序列是指有序的队列,重点在"有序". 一.Python中序列的分类 Python中的序列主 ...
- JavaScript中 this 的指向
很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结: 首先,顶层的this指向全局对象. 函数中的this按照调用方法的不同,其指向也不同: 1.函 ...