1

I need help, I don't know how to add fading effect of changing background color of body element, by checking checkbox.
(it changes it's color, but I don't know how to add fading effect)

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');
           }
    });
});
Hexley21
  • 566
  • 7
  • 16
  • Welcome to Stack Overflow. What exactly is your question? If you are having problems with your code then please edit your question to tell us exactly what is going wrong and what you are trying to achieve. – FluffyKitten Aug 07 '20 at 02:13
  • 1
    Does this answer your question? [Transition of background-color](https://stackoverflow.com/questions/4411306/transition-of-background-color) – Umair Khan Aug 07 '20 at 05:56
  • Also https://stackoverflow.com/questions/27766343/change-background-color-every-30s-fade-transition/27766408 . Please check out css part. – Umair Khan Aug 07 '20 at 05:58

1 Answers1

0

Use the following CSS for a half-second transition effect on background color of body.

body {
    transition: background-color 0.5s;
}
TimTIM Wong
  • 788
  • 5
  • 16