jquery动画切换引擎插件 Velocity.js 学习01

一、Velocity.js介绍

　　Velocity是一个jQuery插件，重新实现了$.animate() 来产生更高的性能（速度也比CSS动画库更快），而包括新的功能，以提高动画工作流程。

　　Velocity.js只有7k的大小，它不仅包含了$.animate()的所有功能，并且还包含了颜色切换、转换(transform)、循环、缓动、CSS切换、Scroll功能，它是jQuery、 jQuery UI、CSS变换在动画方面的最佳组合。

　　Velocity.js支持IE8+、Chrome、Firefox等浏览器，并支持Andriod以及IOS。

　　Velocity.js在内部实现中使用了jQuery的$.queue()方法，因此它比 jQuery的$.animate()、$.fade()、$.delay()方法更加流畅，其性能也高于CSS的animation属性。

二、项目主页

　　http://julian.com/research/velocity/

　　下载：http://www.jqcool.net/localdown/201503/jqcool.net-velocity.zip

三、使用

3.1 Velocity.js包含两个输入参数，第一个参数为 CSS属性，第二个参数为可选参数，为 velocity 配置选项。具体如下：　　

$("div").velocity({ property1: value1,property2: value2
}, {/* Default options */duration: 400,easing: "swing",queue: "",complete: null,loop: false,delay: false,display: false,mobileHA: true
});

Velocity.js同样支持jQuery的参数简写语法：$element.velocity(propertyMap [, duration] [, easing] [, complete]):,比如：

$("div").velocity({ left: 100 }, 1000);
$("div").velocity({ left: 100 }, 1000, "swing");
$("div").velocity({ left: 100 }, "swing");

3.2 制作动画序列的三种方式

统一HTML代码：

<div class="div1"></div>
<div class="div2"></div>

统一CSS样式：

.div1{ width: 120px; height: 120px; background-color: red;}
.div2{ width: 120px; height: 120px; background-color: blue; margin-top: 20px;}

动画序列方式一：

(function($){// 方式一：$('.div1').velocity(　  {width:'400px'},　  {duration:600,complete:function(){  //队列$('.div2').velocity({width:'400px'},{duration:600})}})
})(jQuery)

动画序列方式二：

(function($){　　 // 方式二：$('.div1').velocity(    {width:'400px'},{duration:600})$('.div2').velocity(    {width:'400px'},{duration:600,delay:600})
})(jQuery)

动画序列方式三（推荐使用）

(function($){// 方式三：var seq = [{elements:$('.div1'),properties:{ width:'500px'},options:{ duration:600}                },{elements:$('.div2'),properties:{ width:'500px'},options:{ duration:600}                }];$.Velocity.RunSequence(seq);})(jQuery)

3.3 预定义动画

(function($){//预定义动画$('.div1').on('mouseover',function(){$(this).velocity('callout.shake')  //官网定义了很多预定义动画：callout.bounce、callout.pulse、callout.swing等});//定义自己的动画效果(RegisterEffect或者RegisterUI)$.Velocity.RegisterEffect('mycall.scalex',{defaultDuration:300,calls:[[{ scaleX : 1.2 },0.5],   //[ { property : value }, durationPercentage, {options} ][{ scaleX : 1.0 },0.5]]})　　//调用自定义动画$('.div2').on('mouseover',function(){$(this).velocity('mycall.scalex')})
})(jQuery)

参考：http://www.infoq.com/cn/news/2014/05/jquery-velocity-js

慕课网：Velocity.js实现弹出式相框

转载于:https://www.cnblogs.com/lvmylife/p/5495037.html

jquery动画切换引擎插件 Velocity.js 学习01相关推荐

基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
轻量级的jQuery表单验证插件 - HAPPY.js
为什么80%的码农都做不了架构师?>>> 日期:2012-9-14 来源:GBin1.com 在线演示本地下载功能强大的表单验证插件很多,以前我们介绍过validati ...
cropbox php,jQuery用户头像裁剪插件cropbox.js实例分享
本文主要为大家详细介绍了jQuery用户头像裁剪插件cropbox.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 几乎每一个网页是必备图片上传,图片裁剪功能,这 ...
Jquery 弹出对话框插件xcConfirm.js
Jquery 弹出对话框插件xcConfirm.js,感觉很方便使用,使用方法如下: <!DOCTYPE html> <html><head><meta ch ...
菜鸟学习----前端vue.js学习01
菜鸟学习----前端vue.js学习01 项目使用vue.js脚手架,构建项目 1.vue.js构建登录框登录框架构使用element ui Tabs 标签页,构建基础样式.用户登录,二维码查询,编 ...
10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
轻量级的jQuery表单校验插件: Happy.js
当前已经有许多jQuery表单校验插件,并且有些也很不错,但这些插件功能太强大,使用比较复杂.如果你想找一个简单点的插件 Happy.js 刚好是一个很好的选择. 这个插件是轻量级的,所以只支持一些输 ...
jQuery全屏滚动插件 Fullpage.js 及 move.js
Fullpage.js 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &l ...
jQuery全屏滚动插件fullPage.js
演示下载简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),Q ...

jquery动画切换引擎插件 Velocity.js 学习01

jquery动画切换引擎插件 Velocity.js 学习01相关推荐

最新文章

热门文章