Animación de gradiente CSS

Question

Tengo un botón (ancla) que tiene un degradado CSS3.
Quiero animar/fundir el degradado a un color cuando el usuario pasa el cursor sobre el botón.
El problema es que no puedo encontrar cómo hacerlo, ya que la animación de jQuery UI en colores solo funciona en los regulares, no en los degradados.
¿Alguna idea?
Gracias!

Answer 1

Puede usar una animación CSS3, aunque no son compatibles con todos los navegadores. Esta página tiene un ejemplo de cómo cambiar el color de fondo, obviamente, necesitarás agregar el degradado.

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

Answer 2

he escrito un plugin de jQuery para animar CSS3 gradientes para los navegadores que lo soportan.

Se puede encontrar here

Se utiliza un gradiente cssHook que escribí para la normalización de los gradientes CSS3 para que sea más fácil de usar.

Se podría utilizarlo como:

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

Se utiliza $.queue y $.dequeue/next() por lo que también puede agregar en otras animaciones.

Necesita un gradiente para ser configurado primero para que esto funcione.

El problema con la animación es que jQuery generalmente lo hace en el valor de la propiedad CSS, no un número, por ejemplo, que está dentro de un valor.

Answer 3

Compruebe esta biblioteca jquery llamada Backgroundor, la escribí yo mismo.

Tan fácil simplemente escriba $('#divId').backgroundor(); y funcionará, también hay muchas opciones en él. verifíquelas:

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