jQuery Color Animate (jQuery 颜色变换动画) 插件
转载地址: http://blog.netsh.org/posts/jquery-color-animate-plugin_619.netsh.html
弥补jQuery的不足
我们知道jQuery几乎是我们最常用的javascript库了,不过尽管他自己本身拥有大量的特效,但却仍然缺少一些动画效果。比如说,颜色、背景颜色的变换。弥补这一不足的方法给大家提供两个:
1、jQuery UI 库
jQuery是一款强大的jQuery插件性的特效库,通过jQuery UI可是实现下属功能:
Interactions
Complex behaviors like drag and drop, resizing, selection and sorting.
- Draggable
- Droppable
- Resizable
- Selectable
- Sortable
Widgets
Full-featured UI controls — each has a range of options and is fully themeable.
- Accordion
- Autocomplete New!
- Button New!
- Datepicker
- Dialog
- Progressbar
- Slider
- Tabs
Utilities
Low-level utilities for building rich interactions, widgets, and effects.
- Position New!
- Widget
你可以点击上面的链接查看在线demo。其中就包含color animate。
附上jQuery UI API:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
2、Edwin Martin提供的jQuery color animate插件
如果你只是需要颜色变换功能,也不必去花费时间装载一个和jQuery本身几乎一样大的插件。我就没有这么做。好在Edwin Martin为我们提供了单独的jQuery Color Animate插件,js本身很小,只有几行。实现效果可以有:
- color
- backgroundColor
- borderColor
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- outlineColor
在线Demo演示:
$('#demodiv').animate({color: '#E4D8B8'})
|
||
$('#demodiv').animate({backgroundColor: '#400101'})
|
||
$('#demodiv').animate({borderBottomColor: '#00346B'})
|
||
$('#demodiv').animate({borderColor: '#F2E2CE'})
|
||
$('#demodiv').animate({color: 'rgba(42, 47, 76, 0.1)'})
|
是不是很酷呢?他的实现方法如下:
$(selector).animate({color:”#FFFFFF“},speed,callback_function);
其中color的值可以使hex值、RGB值;speed的单位是毫秒;callback_function是展示完之后要运行的函数。
下载
如果你需要,可以下载这两个js文件并调用就可以了,如果要使用就直接下载第一个,如果想研究的话就用第二个罢~:
- jquery.animate-colors-min.js (1.70kB, 推荐)
- jquery.animate-colors.js (3.30kB)
谢谢收看。
PS: 在本站首页的硬又黑导航条(需要滚动条向下拖到能够到某个位置)、文章页面的分享导航条都有使用backgroundColor的渐变实现引人注意力的效果。
jQuery Color Animate (jQuery 颜色变换动画) 插件相关推荐
- html 放上去动画停止,使用jQuery的animate()+CSS样式实现动画效果及stop()停止动画
01第1节:jQuery动画概述 #JavaScript#在jQuery中,除了可以淡入淡出.滑动效果之外,还可以使用animate()方法创建自定义的动画效果. 对于自定义的动画函数animate( ...
- jQuery之animate自定义动画
下面是对jQuery自定义动画的整理,希望可以帮助到有需要的小伙伴. jQuery的animate()方法可以用来自定义动画方法 语法结构如下: animate(properties,duration ...
- 综合设计一个OPPE主页--页面的插件引用(animate.css)--d动画的使用--滚轮或鼠标到该位置时,才有动画的切换---所以我们需要用jquery监听鼠标滚轮的滚动事件
Animate.css | A cross-browser library of CSS animations. 里面有许多css的效果 首先使用 animate.css文件 link rel=&qu ...
- html数字变换插件,轻量级jquery数字动画插件
jquery.countup.js是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 该数字动画插件可以控制动画的延迟时间和动画过渡时间.它依赖于 ...
- 前端动画大全:css的transition、css3的animation、Jquery的animate、js的setInterval
前端制作动画的几种方式(css3,js,jquery) 制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总 ...
- html文字自动上翻,jQuery超酷文字随机翻转变换动画特效
Flapper是一款效果非常酷的文字随机翻转变换动画jQuery特效.它的效果类似于机场或车站显示航班或车次的文字变换效果,每个文字都随机变换几次,然后才显示某个设定好的文字. 该文字特效可以显示文字 ...
- jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件
完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...
- jquery背景动画插件使用
在网页制作动画特效的时候,有时候想通过背景插入图片,然后通过控制背景显示的位置来实现一些动画效果,这样就不用使用绝对定位控制left和top来实现动画效果!但是jquery本身的动画函数是不支持背景动 ...
- jquery数字动画插件jquery.animateNumber.js
jq数字动画插件-jquery.animateNumber.js,可以实现数字的动画显示效果,比如从1跑到36500,从1%跑到100%类似这样的效果,数字动画效果控制多样,非常不错. jquery. ...
最新文章
- 使用mod_proxy_balancer实现负载均衡
- Webfrom --图片验证码
- golang中的执行规则
- 【学术相关】供参考:刚刚,2021 世界大学学术排名发布!
- boost::test模块装饰器数据测试用例测试
- Web框架——Flask系列之设置和读取cookie(十五)
- android 3d模型ppt,PPT已支持3D PPT怎么插入3D模型?
- 神操作!使用命令更改MAC截图默认保存格式的方法
- F5 cookie值与IP地址(二):将IP地址转换成F5 cookie值
- 基础集合论 第一章 2 集合
- vue综合实例——音乐播放器(悦听player)
- 《平凡的世界》(书评)
- Python Day19
- 如何做好项目的验收工作?
- matlab二项式,动态规划 – 计算二项式系统 —MATLAB代码 – 算法网
- Oracle调优总结
- win10浏览器正常访问,但无法进行下载(解决方法)
- 阿里云AMD服务器ECS实例g6a、c6a和r6a性能参数详解
- 大数据算法_看过来!2019“神气”大数据算法与应用赛决赛在即
- lesson 21 mad or not 是不是疯了-把什么逼疯,be driving sb mad,live near 住在什么附近,过去将来时的被动式 will be done