【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

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

  • 2014-05-07
  • 本文字数:889 字

    阅读完需:约 3 分钟

5 月 3 日,Julian 在其 GitHub 上发布了 Velocity.js。Velocity.js 是一款动画切换的 jQuery 插件,它重新实现了 jQuery 的$.animate()方法从而加快动画切换的速度。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 属性,具体原理读者可以参考这篇文章

Velocity.js 包含两个输入参数,第一个参数用于规定产生的动画效果,第二个参数为可选参数,用于规定动画的额外选项。具体如下:

复制代码
$("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");

Velocity.js 官方宣传 Velocity 的目标是成为 DOM 中动画切换方面的领导者。读者可以从这里下载最新版本的Velocity.js,由于Velocity.js 的方法签名和 $.animate()一样,因此只需将方法名从 animate 改为 velocity 即可。在其官方网站给出了几个绚丽的 Demo ,读者可以参考学习。

参考文档

  1. http://julian.com/research/velocity/
  2. http://davidwalsh.name/css-js-animation
  3. https://news.ycombinator.com/item?id=7663775

感谢杨赛对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ )或者腾讯微博( @InfoQ )关注我们,并与我们的编辑和其他读者朋友交流。

2014-05-07 08:4018234
用户头像

发布了 219 篇内容, 共 134.5 次阅读, 收获喜欢 190 次。

关注

评论

发布
暂无评论
发现更多内容

it资产管理系统解决方案

低代码小观

资产管理 企业管理系统 CRM系统 IT治理 资产安全

有更新!鸿蒙智联生态产品《接入智慧生活App开发指导》(官方版)

HarmonyOS开发者

HarmonyOS 鸿蒙智联

智能手表的下半场,机遇与挑战并存

Speedoooo

物联网 小程序容器 智能手表 智能穿戴

设计千万级学生管理系统的考试试卷存储方案

锎心😌😌😌

必示科技入围未来银行科技服务商Top100榜单

BizSeer必示科技

带你认识2种基于深度学习的场景文字检索算法

华为云开发者联盟

深度学习 计算机视觉 文本检测 场景文本检索 文字检索

企业如何应对知识管理中的文档管理

小炮

知识管理

开发改了接口,经常忘通知测试,有什么好的解决方案吗?

Liam

测试 Postman 自动化测试 测试工具 测试自动化

基于Sharding-JDBC的订单分库⽅案

领创集团Advance Intelligence Group

一个平面设计师的异想世界

万事ONES

研发管理 设计师 ONES workbalance

智慧运维平台之全息监控

鲸品堂

运维 通信 运营商

一看即会:Serverless 应用开发的 7 个实战小技巧(文末附好礼)

阿里巴巴云原生

阿里云 Serverless 架构 开发者 云原生

KPI与360度考核结合的应用落地方案

明道云

松灵学院 | Scout mini 仿真指南

松灵机器人

人工智能 机器人 ROS 移动机器人

工程师们看过来|这是我见过的IT圈最“潮”的产品发布会了!

观测云

程序员 可观测性 产品发布会 IT工程师 监测

直播预告|企业云原生 IT 成本治理方案解析

阿里巴巴云原生

阿里云 容器 云原生 cncf 直播预告

如何成为一名亚马逊云科技 Community Builder

亚马逊云科技 (Amazon Web Services)

Cloud 亚马逊云科技 career

阿里云人工智能创新发布-工业五金图片搜索

视觉智能

拍照购物 以图搜图 图像搜索 拍立淘

OpenHarmony技术日圆满举行 | 3.1 Release版本重磅发布,生态落地初具规模

OpenHarmony开发者

OpenHarmony 技术日

风险与机遇并存,数据分析厂商如何突围?

ToB行业头条

Sidecar 模式的机制与应用

全象云低代码

Kubernetes 容器 低代码 后端技术 Sidecar

列举GaussDB(DWS)常见的查询时索引失效场景

华为云开发者联盟

索引 GaussDB(DWS) 隐式类型转化 GIN索引 analyze

80+产品正通过兼容性测试,OpenHarmony生态落地已初具规模

科技汇

网站的FAQ页面应该怎么写?

小炮

FAQ

区块链赋能不动产—易居EBaaS在不动产领域应用

BSN研习社

区块链

Docker 镜像知多少?

Daocloud 道客

云原生 Docker 镜像

OpenHarmony技术日成功举办,全球下载次数高达6300万

科技汇

在亚马逊云科技上搭建静态无服务器 Wordpress,每天仅需 0.01 美元

亚马逊云科技 (Amazon Web Services)

Serverless CDN WordPress

免费IT自动化运维平台- ETL调度批量管理工具 TASKCTL 8.0 作业设计功能使用

TASKCTL

数据仓库 数据治理 运维自动化 ETL任务 TASKCTL

以南大通用为例,讲一讲如何完成与龙蜥操作系统的兼容验证

OpenAnolis小助手

操作系统 龙蜥社区 南大通用 兼容验证

使用车载小程序,共建车联网联合共赢生态

Speedoooo

车联网 物联网 智能设备 小程序容器 车载设备

JQuery动画插件Velocity.js发布:更快的动画切换速度_语言 & 开发_小盖_InfoQ精选文章