几天前我问了一个问题,我得到了一个答案,这不是真正的回答,但它给了我一个想法…下面的代码是在那个答案中,过了一会儿我就明白了……除了一部分。我想做一些径向渐变的动画,那个家伙做了一个jQuery插件,虽然没有达到我想要的效果,但至少有一些基础。所以我不明白的部分是命令
.match(d+/g))
他不知何故(如果我是对的)从渐变中得到RGB,然后用它在两种颜色之间进行动画。我试图在谷歌和jQ文档中找到一些东西,但我无法找到一些可以启动的东西。
所以我的问题是我如何从CSS中得到一些东西,比如渐变的部分等?我想做一个渐变动画的jQuery插件,但我不能,直到我弄清楚如何改变css属性的部分,而不改变整个家伙做了。
——他的例子
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)"});
大卫——
要小心,在他的例子中,最后的代码实际上是
$(this).animate({"gradient": "rgb(" + c.join(",") + ")"});
你的问题中有一个看起来像硬编码的字符串。
$.match()是一个正则表达式函数,用于查询对象(fx. x)。为指定的搜索字符串(/d+/g)结束或fx. eem .style.background)。正如他所评论的,他正在解析数字:
fx.start = fx.elem.style.background.match(/d+/g); //Parse original state for numbers. Tougher because radial gradients have more of them
一个正则表达式模式匹配指南(无数的指南之一)可以在这里找到。
至于分配CSS值,最终它们只是字符串。因此,您可以检索所需的任何CSS值,并对其进行解析并将其插入。
$('#myobject').css('<css property name>') // get value
$('#myobject').css('<css property name>', '<value'>) // set value
逻辑你必须自己解决,但看起来上面的那位先生已经为你指出了正确的方向。
或者不仅仅是设置渐变的CSS属性,在你的情况下,你似乎会使用jQuery UI中的动画插件以及他的"渐变"方法,为你插入CSS。
$(this).animate({"gradient" : "<your parsed/calculated gradient value>"});
如果您看一下这个JSFiddle,您会发现可以获取元素的渐变CSS,但是,它是整个渐变定义而不是每个值。
在上面的例子中,FF6输出
-moz-radial-gradient(50% 50% 45deg, circle closest-side, rgb(255, 165, 0) 0%, rgb(255, 0, 0) 100%)
你可以用regex来解析(某种程度上),但每个人写的CSS都不同,所以这将是相当困难的。
有一个设置渐变的解决方案,但没有得到它。