CSS漸變動畫

Question

我有一個按鈕（錨點），它有一個CSS3漸變。
我想在用戶懸停在按鈕上時將漸變動畫/淡化爲一種顏色。
問題是我找不到如何做到這一點 - 因爲顏色上的jQuery UI動畫只適用於普通的，而不是漸變。
任何想法？
謝謝！

Answer 1

您可以使用CSS3動畫，儘管它們在所有瀏覽器上都不受支持。這個頁面有一個改變背景顏色的例子，顯然你需要添加漸變。

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

Answer 2

我已經寫了一個jQuery插件動畫CSS3漸變爲支持它的瀏覽器。

你可以找到它here

它採用了漸變cssHook我寫了標準化CSS3漸變，使之更易於使用。

你會用它喜歡：

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

它採用$.queue和$.dequeue/next()所以你也可以添加其他動畫。

它需要先設置漸變才能使其工作。

動畫的問題在於，jQuery通常在CSS屬性值上進行操作，而不是數字，例如，在值內。

Answer 3

檢查此jQuery庫名爲Backgroundor，我自己寫的。

只需輸入$('#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 
}