CSS渐变动画

Question

我有一个按钮(锚)上有一个CSS3渐变。

当用户将鼠标悬停在按钮上时，我想将渐变动画/渐变淡出为一种颜色。

问题是我找不到怎么做--因为颜色上的jQuery UI动画只能在常规颜色上工作，不能在渐变上工作。

有什么想法吗？

谢谢!

Answer 1

您可以使用CSS3动画，尽管并非所有浏览器都支持它们。这个页面有一个改变背景颜色的例子，显然你需要添加渐变。

http://css3.bradshawenterprises.com/animations/

Answer 2

我已经为支持它的浏览器编写了一个为Css3渐变设置动画的jQuery插件。

你可以在here上找到它

它使用了我为归一化CSS3渐变而编写的渐变cssHook，使其更易于使用。

您可以像这样使用它：

$("#elem").animateGradient('linear-gradient(red, blue)', 1000);

它使用$.queue和$.dequeue/next()，因此您还可以添加其他动画。

它需要首先设置一个渐变才能正常工作。

动画的问题是，jQuery通常对CSS属性值执行动画，而不是在值内的数字。

Answer 3

查看这个名为Backgroundor的jquery库，它是我自己编写的。

只需输入$('#divId').backgroundor();，它就会工作，而且它有很多选项。检查它们：

// the values here are the default values
options = {
  opacityval    : 0; // int, only 1 or 0 are accepted now (can be boolean too)
  intervaltime  : 100; // int, interval time value
  values        : [0,51,75]; // array of int, default percentage values for the linear gradient colors
  colors        : ['#499bea','#207ce5','#1679e3']; // array of string (hex values), default colors for the linear gradient
  color         : '#000000'; // string (hex value), default color for opacity animation
  animspeed     : 'linear'; // string, default animation curve
  animdegree    : '90deg'; // string, default linear-gradient degree
}