3
這將是我今天的列表問題。是否有可能在jQuery中使用動畫漸變漸變(使用.animate),如果是的話,怎麼樣?使用jQuery動畫漸變
background: -webkit-gradient(
radial, 50% 50% ,0, 50% 50%, 70, from(rgb(25,25,25)), to(rgb(50,50,50))
);
這將是我今天的列表問題。是否有可能在jQuery中使用動畫漸變漸變(使用.animate),如果是的話,怎麼樣?使用jQuery動畫漸變
background: -webkit-gradient(
radial, 50% 50% ,0, 50% 50%, 70, from(rgb(25,25,25)), to(rgb(50,50,50))
);
不能默認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)"});
你可能想創建兩個功能,一個是內部顏色(jQuery.fx.step.innerColor
),一個用於外(jQuery.fx.step.outerColor
),這將被稱爲像這樣:
$(this).animate({"innerColor": "rgb(25,25,25)",
"outerColor": "rgb(50,50,50)"});
對不起,missclick –
重複? http://stackoverflow.com/questions/5522513/animate-css3-gradient-positions-using-jquery –
@SérgioMichels我還沒有看到那個,但這傢伙沒有得到正確的答案,所以..? –