CSS渐变动画

Question

我有一个按钮(锚),上面有一个CSS3渐变.
当用户将鼠标悬停在按钮上时,我想将渐变动画/渐变为一种颜色.
问题是我找不到如何做到这一点 - 因为颜色上的jQuery UI动画仅适用于常规动画,而不适用于渐变.
有任何想法吗？
谢谢!

Answer 1

您可以使用CSS3动画,但并非所有浏览器都支持它们.此页面有一个更改背景颜色的示例,显然您需要添加渐变.

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

Answer 2

我已经为支持它的浏览器编写了一个jQuery插件,用于动画Css3 Gradients.

你可以在这里找到它

它使用我编写的Gradient cssHook来规范化CSS3渐变,使其更易于使用.

您会像以下一样使用它:

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

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

首先需要设置渐变才能使其工作.

动画的问题是jQuery通常在CSS属性值上执行,而不是例如数值,它在一个值内.