Изменить интенсивность цвета на JQuery?

Question

[Никита Склюев]

Здравствуйте уважаемые Хабрачеловеки.



Вчера знакомый попросил сделать так, чтобы с помощью ползунка на сайте можно было бы изменять интенсивность цвета в блоке.



Перетягивание ползунка сделать не проблема, а вот с интенсивностью что то я застрял



Не подскажете как изменить интенсивность цвета с помощью JS?



Желательно обойтись без плагинов!



Просто ранее с таким не сталкивался.



Заранее благодарен!

Answer 1

[Михаил Крайнов]

В CSS3 есть HSL нотация цвета. Для уменьшения интенсивности надо уменьшать насыщенность (saturation). Для ИЕ меньше 8 можно писать цвет в RGB, конвертируя его из HSLa джаваскриптом.

Answer 2

[TrueDrago]

Самый простой вариант — менять css свойство «opacity», например так:

$('#element').animate({opacity: "0.5"}, 500);

Comments

[TrueDrago]

Или, если хотите без анимации, то:

$('#element').css("opacity", "0.5");

Хотя оно и меняет прозрачность, смотрится именно как смена интенсивности цвета элемента, и вполне подойдет, если вам конечно по каналам не надо менять.

[Никита Склюев]

Спасибо, попробую!

Answer 3

[max_rip]

Ну и для полной совместимости можно использовать конвертер HSL2RGB www.codingforums.com/showpost.php?p=54172&postcount=2

Answer 4

[Никита Склюев]

Совместимость необязательна, это для современных мобильных браузеров"!

Answer 5

[Виталий Перетятько]

code.google.com/p/flot/source/browse/trunk/jquery.colorhelpers.js
Используется в частности в flot.
Работает приблизительно так
$.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
позволяет удобно работать с цветом, меняя значения каналов вместе или по отдельности, на абсолютное или относительное значение.