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命令之cd
cd命令 用处:跳转目录 用法:输入cd加上你想跳转的目录,这里分几种情况 示例: 一.进入当前目录的子目录 我现在的目录是 /home/jim,如图 这个目录下面有好多文件夹是吧,现在我想进入到其中 ...
- liunx必知必会（1）
一.liunx目录结构: (1)/bin中 - 用户二进制文件 包含二进制可执行文件. 在单用户模式下,你需要使用的常见Linux命令都位于此目录下.系统的所有用户使用的命令都设在这里. (2)/sb ...
- 求FIRST集和FOLLOW集
花了点时间弄了个大概,希望对和我一样的人有所帮助. 文法如下: E -> TE'E' -> +TE'|εT -> FT'T' -> *FT'|εF -> (E)|id ...
- intellij idea 2018
intellij idea 输入System.out.println()的快捷方法是:输入sout然后按tab键. 由于项目中引入了spring-boot-starter-test的依赖,也就是集成了 ...
- 【转】Robot Framework作者建议如何选择自动化测试框架
原文:http://www.infoq.com/cn/news/2012/06/robot-author-suggest-autotest 软件自动化测试,作为手工测试的替代,越来越受到关注.Pekk ...
- Linux之Ubuntu安装Sublime
0.控制台下开启并使用: 为什么先说这一步呢?确实很尴尬,对不对.但确实,当初就是安装好了都不知道咋个用,就是这么蠢...hahahahahahahha 命令行:subl 注意:不是sub,也不是su ...
- UBUNTU18.04安装网易云音乐并直接图标启动
这是一个网友改的程序,安装好以后把 ~/.cache/netcase-cloud-music 这个目录删除掉,就可以正常使用了,不用root权限
- Python中os.system和os.popen区别
Python调用Shell,有两种方法:os.system(cmd)或os.popen(cmd)脚本执行过程中的输出内容.实际使用时视需求情况而选择. 两者的区别是: os.system(cmd)的返 ...
- URLSession
URLSession时ios7中的心得网络接口,与NSURLConnection是并列的. 当程序在前台时,URLSession与NSURLConnection大部分可以互相替代. URLSessio ...
- GNU/Linux的GNU是什么意思
这个组织中黑客云集,而且多是掌握核心技术的真正高手,他们的作品多是编译器.词法/语法分析器.底层函数库等大作.更重要的不是他们的技术,而是他们的哲学!他们的哲学就是技术上的“共产主义”——人人为我,我 ...