velocity.js用法整理1
velocity.js
此框架相对于JQ的运动算法, 有很大的优势。
例如,A和B两个元素,position:absolute; top:0; 现在让A元素用JQ的animate,B用velocity,1秒内改变top值为500。此时,可以明显的看出区别,使用JQ运动的元素运动起来效果非常不平滑,velocity的元素非常平滑。
这只是velocity各种强大里的一个基本方面,还有很多JQ无法直接实现的功能。
英文API地址:http://www.julian.com/research/velocity/
下面开始记录用法
1.基础用法一
html:
<div id="testEle1" style=" position:absolute; width:100px; height:100px; background-color:#000; left:100px; top:100px;"></div>
JS:
$("#testEle1").velocity({
left:800
},500)
2.基础用法二
$("#testEle1").velocity({
left:800
},{
duration:2000
})
第二个参数除了duration(时间)之外,常用到的还有
easing:规定在不同的动画点中设置动画速度的 easing 函数
loop:是否循环/循环的圈数
begin & complete:动画开始前&结束后的回调函数
progress:进度
progress: function(elements, complete, remaining, start, tweenValue) { }
complete代表完成的百分比,remaining代表运动结束剩余的时间,start表示调用开始的绝对时间(这个参数目前想不到有什么用)
delay:延迟执行的时间
display&visibility : 动画执行完成后隐藏
queue:velocity不同于JQ的animate,设置false,可以使得一个新的动画立即调用运行,如果不设置,当有针对同一元素的多个运动时,会一次运行,反之,同时运行,遇到冲突的属性,会取后面的。
具体用法遗忘或者不清晰时参考英文API。
velocity.js用法整理1的更多相关文章
- xss其他标签下的js用法总结大全
前段时间我遇到一个问题,就是说普通的平台获取cookie的语句为↓ Default <script src=js地址></script> 1 <scr ...
- Velocity.js的使用
前面的话 Velocity是一款优秀的JS动画库,完全可以作为jQuery的animate的替代品.需要动画功能时,使用Velocity是一个好选择.本文将详细介绍Velocity.js的使用 概述 ...
- Velocity.js初识
Velocity.js官网:http://julian.com/research/velocity/ 兼容IE8和Android2.3 Velocity.js基本用法 效果图: CSS .box{ w ...
- velocity.js 动画插件
1. velocity.js 插件介绍 Velocity 是独立于jQuery的,但两者可以结合使用的动画插件.用法类似 jq 的 animate ,但是支持更高级动画. ( 颜色动画.转换动画(tr ...
- 一个十分好用的动画工具:Velocity.js
就像许多开发者确信的那样,在Web上使用CSS实现动画并不是唯一的方式,我们也可以使用JS来实现,并且JS还有一些CSS无法替代的优势. 然而抛开JS而选择CSS来实现动画,将以样式表内容膨胀,丧失对 ...
- 利用velocity.js将svg动起来
关于velocity.js Velocity.js是一款jquery动画引擎插件,它拥有与jquery中的$.animate()相同的API,还打包了颜色动画,转换,循环,easing效果,类动画.滚 ...
- velocity.js 中文文档 (教程)
velocity.js 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. Vel ...
- 一统江湖的大前端(8)- velocity.js 运动的姿势(上)
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...
- 界面优化--如何提升用户体验(Velocity.js和GSAP)
Velocity.js和GSAP 我们需要提升代码质量来留住用户.作为用户界面的建设者,我们的工作是迅速引导和引导用户的注意力,指导他们如何有效地使用我们的应用程序. 1. 如何提升代码质量 定向聚焦 ...
随机推荐
- node read file fs
var fs = require("fs") fs.readFile("file.txt","UTF-8",function(err,dat ...
- MACD 基本用法
基本用法 1. MACD 金叉:DIFF 由下向上突破 DEA,为买入信号. 2. MACD 死叉:DIFF 由上向下突破 DEA,为卖出信号. 3. MACD 绿转红:MACD 值由负变正,市场由空 ...
- Android自动化测试 - 自动化测试工具比较
- hihoCoder#1384 : Genius ACM
对于一个固定的区间$[l,r]$,显然只要将里面的数字从小到大排序后将最小的$m$个和最大的$m$个配对即可. 如果固定左端点,那么随着右端点的右移,$SPD$值单调不降,所以尽量把右端点往右移,贪心 ...
- Android LruCache(Picasso内存缓存)
Cache保存一个强引用来限制内容数量,每当Item被访问的时候,此Item就会移动到队列的头部,当cache已满的时候加入新的item时,在队列尾部的item会被回收. 如果你cache的某个值需要 ...
- 应用程序间跳转 (友盟SSO 授权 与系统自带的分享)
应用程序间跳转的应用场景 使用第三方用户登录,如微信登录,返回用户名和密码 需要用户授权,返回到调用程序,同时返回授权的用户名 应用程序推广,跳转到itunes并显示指定app下载页 第三方支付,跳转 ...
- HDU - Travel
Problem Description Jack likes to travel around the world, but he doesn’t like to wait. Now, he is t ...
- Selenium_获取相对坐标
<html> <head> <title>位置</title> <style> .test { background: url(" ...
- Jquery Ajax方法传值到action
假设cshtml文件中是这样的: <script type="text/javascript"> $(document).ready(function(){ $(&qu ...
- 360safe安全卫士防网站攻击源码
近段时间,公司网站老被攻击,于是研究起防止攻击方法,当然无外乎就是SQL注入之类的问题,无意间发现了一个360安全卫士提供的源码,觉得挺好的,咋们暂且不说防攻击效果,至少思路是很好的,奉献给大家,大家 ...