动态改变css中的饱和度

Question

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

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

Answer 1

我认为this project会完全符合您的要求！

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

查看this demo

Answer 2

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

1. 我从github获得的jQuery颜色插件的latest version与jQuery 1.4.2无法正常工作;当我将它升级到1.4.4时，我得到的与jQuery.type相关的错误没有被定义。
2. 我不得不改变我想要着色的div结构，为每个元素引入部分透明度。我有多达四个需要着色的重叠div，最后有效的是将每个div的不透明度设置为0.3，以产生我需要的四个级别的清晰灰度范围。最初，我刚刚为不透明度为1的每个div指定了灰度值。

3. 正如我在对@ Pheonixblade9的回答中所指出的那样，改变饱和度的天真解决方案不起作用，因为如果饱和度值变为0，插件将失去色调值，而是使用0代替。为了让它可靠地工作，我向饱和度值引入了一个最小值，这个值足够小，不能在监视器上看到（我希望），但足以防止插件代码丢失色调。

   function setSaturation($elem, score, animationDuration) {
        var targetColor = $.Color({saturation: Math.max(score, 0.01)});
        $elem.animate({backgroundColor: targetColor}, animationDuration);
    }