使用jQuery动画渐变

问题描述：

这将是我今天的列表问题。是否有可能在jQuery中使用动画渐变渐变（使用.animate），如果是的话，怎么样？使用jQuery动画渐变

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

对不起，missclick –

重复？ http://*.com/questions/5522513/animate-css3-gradient-positions-using-jquery –

@SérgioMichels我还没有看到那个，但这家伙没有得到正确的答案，所以..？ –

答

不能默认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)"});

使用jQuery动画渐变

相关推荐