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演示：

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的渐变实现引人注意力的效果。