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初识的更多相关文章

  1. velocity.js用法整理1

    velocity.js 此框架相对于JQ的运动算法, 有很大的优势. 例如,A和B两个元素,position:absolute;  top:0; 现在让A元素用JQ的animate,B用velocit ...

  2. JQuery动画插件Velocity.js发布:更快的动画切换速度

    5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...

  3. Velocity.js发布:更快的动画切换速度

    Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate ...

  4. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  5. javascript动画:velocity.js学习

    第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...

  6. Velocity.js的使用

    前面的话 Velocity是一款优秀的JS动画库,完全可以作为jQuery的animate的替代品.需要动画功能时,使用Velocity是一个好选择.本文将详细介绍Velocity.js的使用 概述 ...

  7. jQuery动画切换引擎插件Velocity.js

    Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...

  8. velocity.js 动画插件

    1. velocity.js 插件介绍 Velocity 是独立于jQuery的,但两者可以结合使用的动画插件.用法类似 jq 的 animate ,但是支持更高级动画. ( 颜色动画.转换动画(tr ...

  9. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

随机推荐

  1. 【推荐】Nginx基础知识之————多模块(非覆盖安装、RTMP在线人数实例安装测试)

    说明:已经安装好的nginx,需要添加一个未被编译安装的模块,需要怎么弄呢? 具体:这里以安装第三方nginx-rtmp-module和nginx-accesskey-2.0.3模块为例,nginx的 ...

  2. JavaWeb应用和Servlet

    JavaWeb应用的生命周期是由Servlet容器来控制的.包括三个阶段: 1.启动阶段:加载Web应用的有关数据,创建ServletContest对象,对Filter(过滤器)和一些Servlet进 ...

  3. java实现《剑指offer》(一)1~10

    每段代码都是在牛客网在线编程通过后,然后拷过来的,准确性可以保证. 1.二维数组中的查找 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入 ...

  4. js 格式化时间、字符串指定长度、随机字符串

    格式化字符串长度 方法 function formatWidth(str, width){ str += '' if(str.length<width) '+str, width) else r ...

  5. delimiter 与 存储过程

    1.如此执行语句不行,需要在 delimiter IF not EXISTS ( SELECT * FROM information_schema. COLUMNS WHERE table_schem ...

  6. Linux下解压缩

    1)对于.tar结尾的文件 tar -xf all.tar 2)对于.gz结尾的文件 gzip -d all.gz gunzip all.gz 3)对于.tgz或.tar.gz结尾的文件 tar -x ...

  7. sql server存储过程简单的使用

    --创建存储过程 create proc test_proc @date datetime as select * from t_user where times between ),),),),' ...

  8. [洛谷P3948]数据结构 题解(差分)

    [洛谷P3948]数据结构 Description 最开始的数组每个元素都是0 给出n,opt ,min,max,mod 在int范围内 A: L ,R ,X 表示把[l,R] 这个区间加上X(数组的 ...

  9. luogu P3198 [HNOI2008]遥远的行星

    bzoj 洛谷 这题意是不是不太清楚 真正题意:求\[f_i=\sum_{j=1}^{\lfloor i*A \rfloor} \frac{M_i*M_j}{i-j}\] 似乎只能\(O(n*\lfl ...

  10. 给父元素与子元素分别设置visibility注意点

    由于机顶盒的终端特性原因,不能用display:hidden去做隐藏,就选择了visibility:hidden. 在这里遇到一个现象: 给父元素设置了hidden,但是里面的子元素依然可见.以为只是 ...