使用jQuery動畫漸變

Question

這將是我今天的列表問題。是否有可能在jQuery中使用動畫漸變漸變（使用.animate），如果是的話，怎麼樣？

Example

background: -webkit-gradient(
    radial, 50% 50% ,0, 50% 50%, 70, from(rgb(25,25,25)), to(rgb(50,50,50)) 
); 

Answer 1

不能默認jQuery中做到這一點，你甚至不能平的動畫色彩沒有相應的插件。

因爲瀏覽器之間的語法差異，動畫漸變很困難。我爲可能對您有用的一個非常具體的案例編寫了一個插件。這是一個線性漸變，但你可以調整它的徑向。

jQuery.fx.step.gradient = function(fx) { 
    if (fx.state == 0) { //On the start iteration, convert the colors to arrays for calculation. 
     fx.start = fx.elem.style.background.match(/\d+/g); //Parse original state for numbers. Tougher because radial gradients have more of them 
     fx.start[0] = parseInt(fx.start[0]); 
     fx.start[1] = parseInt(fx.start[1]); 
     fx.start[2] = parseInt(fx.start[2]); 
     fx.end = fx.end.match(/\d+/g); 
     fx.end[0] = parseInt(fx.end[0]); 
     fx.end[1] = parseInt(fx.end[1]); 
     fx.end[2] = parseInt(fx.end[2]); 
    } 

    fx.elem.style.background = "-webkit-linear-gradient(rgb(" + [ 
     Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0), 
     Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0), 
     Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0) 
     ].join(",") + ")," + "rgb(0,0,0))"; 
} 

$(this).animate({"gradient": "rgb(0, 255, 0)"}); 

DEMO.

你可能想創建兩個功能，一個是內部顏色（jQuery.fx.step.innerColor），一個用於外（jQuery.fx.step.outerColor），這將被稱爲像這樣：

$(this).animate({"innerColor": "rgb(25,25,25)", 
       "outerColor": "rgb(50,50,50)"});