Jquery: Как добавить эффект выцветания при изменении цвета с помощью флажка Checkig

Question

Мне нужна помощь, я не знаю, как добавить эффект затухания изменения цвета фона основного элемента, установив флажок.
(он меняет цвет, но я не знаю, как добавить эффект затухания)

HTML:

<div class="container">
            <label class="switch" for="checkbox">
            <input type="checkbox" id="checkbox" />
              <div class="slider round"></div>
            </label>
</div>

Jquery:

$(document).ready(function(){
      $('#checkbox[type=checkbox]').on('change', function(){
           if($(this).prop('checked')){
              $('body').css('background-color', 'red');
           }
           else {
               $('body').css('background-color', '#181818');
           }
    });
});

Answer 1

Используйте следующий CSS для эффекта перехода на полсекунды на цвете фона body.

body {
    transition: background-color 0.5s;
}