1. velocity.js 插件介绍

Velocity 是独立于jQuery的，但两者可以结合使用的动画插件。用法类似 jq 的 animate ，但是支持更高级动画。

（

颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画

）

2. 例子代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <h1>666</h1>

  <script src="http://velocityjs.org/js/libs/jquery-1.11.1.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>

  <script>

    $('h1')

    .velocity({

      fontSize:100,

      backgroundColor: "#f06d06",

      backgroundColorAlpha: 0.8,

      color:'#fefefe'

    },1500)

    .velocity('reverse',500);

  </script>

</body>

</html>

3. 相关链接

Velocity.js

velocity.js学习

一个十分好用的动画工具：Velocity.js

velocity.js 动画插件的更多相关文章

  1. js 动画效果实现

    1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...

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

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

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

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

  4. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

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

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

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

    案例实践: 第一页会以动画形式进入页面: 点击进入按钮时,第一页以动画消失,第二页以动画形式进入,同时四张图片也定义从小到大的动画形式: 第二页关闭按钮点击时,先是四张图片以缩小动画消失,然后第二页以 ...

  7. Velocity.js发布：更快的动画切换速度

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

  8. 一个十分好用的动画工具：Velocity.js

    就像许多开发者确信的那样,在Web上使用CSS实现动画并不是唯一的方式,我们也可以使用JS来实现,并且JS还有一些CSS无法替代的优势. 然而抛开JS而选择CSS来实现动画,将以样式表内容膨胀,丧失对 ...

  9. 【js】插件—动效Velocity.js

    Velocity.js——加速JavaScript动画 一款替代jQuery的$ .animate()动效的插件.兼容IE8和Android2.3及以上. 相比较优点: 1.它比JQuery更快,并实 ...

随机推荐

  1. Web前端学习笔记之离线安装npm

    0x00 概述 这段时间的工作主题就是Linux 下的“离线部署”,包括mongo.mysql.postgresql.nodejs.nginx等软件的离线部署.平常在服务器上借助apt-get就能轻松 ...

  2. JavaWeb中的资源映射

    一./与/* <url-pattern>/</url-pattern>  会匹配到/login这样的路径型url,不会匹配到模式为*.jsp这样的后缀型url< url- ...

  3. 【题解】Luogu P4363 [九省联考2018]一双木棋chess

    原题传送门 这道题珂以轮廓线dp解决 经过推导,我们珂以发现下一行的棋子比上一行的棋子少(或等于),而且每一行中的棋子都是从左向右依次排列(从头开始,中间没有空隙) 所以每下完一步棋,棋盘的一部分是有 ...

  4. es破解xpack

    环境:OS:CentOS 7elasticsearch:6.5.0 1.vim LicenseVerifier.java package org.elasticsearch.license; impo ...

  5. python简说（二十一）开发接口

    一.flask举例 import flaskserver = flask.Flask(__name__)#新建一个服务,把当前这个python文件当做一个服务@server.route('/login ...

  6. Linux启动报：UNEXPECTED INCONSISTENCY: RUN fsck MANUALLY问题解决

    现象: 在此界面输入下root的密码.会进入到修复模式 在修复模式下,输入命令fsck –y  /dev/mapper/vg_swnode1-lv_root 这个后面跟的路径就是你上面提示出错的那个路 ...

  7. [c/c++] programming之路（11）、顺序分支

    一.模块化设计 #include<stdio.h> #include<stdlib.h> #include<windows.h> void openbaidu(){ ...

  8. (4opencv)OpenCV PR 成功的收获和感悟

     2018-09-12,第一次对OpenCV PR成功 https://github.com/opencv/opencv/pull/12206 <find innercircle of cont ...

  9. 动态规划之132 Palindrome Partitioning II

    题目链接:https://leetcode-cn.com/problems/palindrome-partitioning-ii/description/ 参考链接:https://blog.csdn ...

  10. Item的anchors属性

    1.anchors group: anchors.top : AnchorLine anchors.bottom : AnchorLine anchors.left : AnchorLine anch ...