Question

我几天前问了一个问题，我得到了一个答案，但这并没有真正回答它，但它给了我一个想法......下面的代码就是答案，我过了一会儿就明白了。除了一部分。我想动画一些径向渐变，那家伙制作了一个jQuery插件，它不是我想要的，但它至少是一些基础。所以我不理解的部分是带命令的部分

.match(\d+/g))

他以某种方式（如果我是对的）从渐变中获取RGB，然后使用它在两种颜色之间进行动画处理。我试图在谷歌和jQ文档上找到一些东西，但我找不到可用的东西。

所以我的问题是如何从CSS中获取一些像渐变等部分的东西？我想为jQuery制作一个渐变动画插件，但是直到我弄清楚如何只更改css attribs的部分而不改变整个部分。

- His example

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)"});

- 大卫

Answer 1

小心，在他的例子中，最终的代码实际上是

$(this).animate({"gradient": "rgb(" + c.join(",") + ")"});

你的问题中看起来像是一个硬编码的字符串。

$。match（）是一个正则表达式函数，用于查询指定搜索字符串（/ \ d + / g）的对象（fx.end或fx.elem.style.background）。正如他评论的那样，他正在解析数字：

fx.start = fx.elem.style.background.match(/\d+/g); //Parse original state for numbers.  Tougher because radial gradients have more of them

可以找到正则表达式模式匹配指南（gazillions之一）here。

至于分配CSS值，最后它们只是字符串。因此，您可以检索所需的任何CSS值并解析它并将其重新插入。

$('#myobject').css('<css property name>')             // get value
$('#myobject').css('<css property name>', '<value'>)  // set value

你必须自己解决的逻辑，但看起来上面的绅士已经指出了你正确的方向。

或者不只是设置渐变的CSS属性，在你的情况下，似乎你在jQuery UI中使用animate插件以及为你插入CSS的“渐变”方法。

$(this).animate({"gradient" : "<your parsed/calculated gradient value>"});

Answer 2

如果您查看this JSFiddle，您会看到可以抓取元素的渐变CSS，但是，它是整个渐变定义而不是每个值。

在上面的例子中，FF6喷出

-moz-radial-gradient(50% 50% 45deg, circle closest-side, rgb(255, 165, 0) 0%, rgb(255, 0, 0) 100%)

你可以用正则表达式解析（排序），但是每个人都用不同的方式编写CSS，所以这很难。

设置渐变的解决方案，但没有得到它。 this answer中应该有很好的信息。

如何将一部分CSS代码转换为JavaScript / jQuery？

2 个答案: