CSS Gradient Animation

Question

I have a button (anchor) that has a CSS3 gradient on it.
I want to animate / fade the gradient to a single color when the user hangs over the button.
The problem is that I cannot find how to do this, since the jQuery UI animation for colors only works on normal ones, not gradients.
Any ideas?
Thanks!

Answer 1

You can use CSS3 animations, although they are not supported in all browsers. This page has an example of changing the background color, obviously you need to add a gradient.

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

Answer 2

I wrote a jQuery plugin for animating Css3 gradients for browsers that support it.

You can find here

It uses the Gradient cssHook, which I wrote to normalize CSS3 gradients to make it easier to use.

You would use it like:

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

It uses $.queue and $.dequeue/next() so you can add other animations as well.

To do this, you must first set the gradient for it to work.

The problem with animations is that jQuery usually does this by the value of the CSS property, and not by the number, for example, within the value.

Answer 3

Check out this jquery library called Backgroundor , I wrote it myself.

It's that simple just enter $('#divId').backgroundor(); and it will work, there are also many options in it. check them out:

 // 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 }