jQuery Color Animate (jQuery 颜色变换动画) 插件

• 1 弥补jQuery的不足
• 2 1、jQuery UI 库
  • 2.1 Interactions
  • 2.2 Widgets
  • 2.3 Utilities
• 3
• 4 2、Edwin Martin提供的jQuery color animate插件
  • 4.1 下载

弥补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

你可以点击上面的链接查看在线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演示：

是不是很酷呢？他的实现方法如下：

$(selector).animate({color:"#FFFFFF"},speed,callback_function);

其中color的值可以使hex值、RGB值；speed的单位是毫秒；callback_function是展示完之后要运行的函数。

下载

如果你需要，可以下载下面的js文件并调用就可以了，如果要使用就直接下载第一个，如果想研究的话就用第二个罢~：

• jquery.color.animations.js下载

谢谢收看。

PS: 在本站文章页面的分享导航条都有使用backgroundColor的渐变实现引人注意力的效果。