Fading icon image

[Kilogica]

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.

Thanks

[admin]

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:

Code:

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

Custom JS:

Code:

$(function() {
  $('.recolor').each(function(_, el) {
    var $el = $(el), addr = $el.data('object');
    
    if (addr) {
      grp.listen(addr, function(obj) {
        $el.toggleClass('on', obj.value);
      });
    }
  });
});

[Kilogica]

Thanks, it works very well.

That's a very smart solution.