This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Fading icon image
Hello there,

is there a way to make two icons slowly fade instead of simply disappear?

For example: I have two leds icon each one of a color (red and blue) linked to a thermostat heat/cool function is it possible to make them slowly fade in/out when I switch mode? E.g. when I switch from cooling to heating the blue one slowly fade out and the red one slowly fade in.

One option is to use hue-rotate animation which will recolor your icon. In this case you need to use the same icon for both on/off state (red for this example). Set additional class to recolor

Custom CSS:
.recolor  {
  transition: filter 3s;
.recolor.on {
  filter: hue-rotate(-120deg);

Custom JS:
$(function() {
  $('.recolor').each(function(_, el) {
    var $el = $(el), addr = $'object');
    if (addr) {
      grp.listen(addr, function(obj) {
        $el.toggleClass('on', obj.value);
Thanks, it works very well.

That's a very smart solution.

Forum Jump: