I'm struggling with adding a fading effect to change the background color of the body element when a checkbox is checked. The color changes successfully, but I can't figure out how to make it fade smoothly.
Here is the HTML code:
<div class="container">
<label class="switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
</div>
And here is the JQuery script:
$(document).ready(function(){
$('#checkbox[type=checkbox]').on('change', function(){
if($(this).prop('checked')){
$('body').css('background-color', 'red');
}
else {
$('body').css('background-color', '#181818');
}
});
});