jquery - css中动态改变饱和度

Question

我正在使用 jQuery 一堆 DIV 创建一个堆叠条形图。每个堆栈的段都用不同的灰色阴影着色。我想通过更改 div 的饱和度来将额外的全局值编码到条形图上，以使其颜色从灰色变为某种阴影颜色，同时保持相对亮度。显而易见的选择是单独修改每个元素的 HSL 值。

我是否忽略了一些更聪明的调整条形颜色的方法？我不认为我可以使用容器的背景颜色，因为条不能是透明的。

score 1 · Accepted Answer

我认为这个项目会完全满足您的要求！

它添加了对使用 jQuery 动画颜色的支持。

score 0 · Accepted Answer

我想更清楚地记录答案。按照@Pheonixblade9 的建议，我使用了 jQuery 颜色插件，但在让它正常工作时遇到了一些麻烦。

我从 github 获得的最新版本的 jQuery 颜色插件在 jQuery 1.4.2 中不能正常工作；当我将它升级到 1.4.4 时，与未定义 jQuery.type 相关的错误消失了。
我必须更改我试图着色的 div 结构，以便为每个元素引入部分透明度。我有多达四个需要着色的重叠 div，最后起作用的是将每个 div 的不透明度设置为 0.3，以便为我需要的四个级别生成清晰的灰度范围。最初，我刚刚为每个不透明度为 1 的 div 分配了灰度值。
正如我在对@Pheonixblade9 的回答的评论中指出的那样，改变饱和度的天真解决方案不起作用，因为如果饱和度值达到 0，插件将失去色调值，并改用 0。为了让它可靠地工作，我引入了饱和度值的最小值，它小到在显示器上不可见（我期望），但足以防止插件代码失去色调。
```
function setSaturation($elem, score, animationDuration) {
     var targetColor = $.Color({saturation: Math.max(score, 0.01)});
     $elem.animate({backgroundColor: targetColor}, animationDuration);
 }
```

2 回答 2