Change css with animation when swiper slide is active - Slider Swiper

I have 4 slides and want to change background color with fluid animation when slide is changed. There are different colors for each slides. I tried this but it only shows #available color when loaded.

$(document).ready(function(){
//Available
if($('#available').hasClass('swiper-slide-active')) {
    $('html').css('background', '#4caf50')
}
//In work
else if($('#inwork').hasClass('swiper-slide-active')) {
    $('html').css('background', '#FFC107')
}
//Pending
else if($('#pending').hasClass('swiper-slide-active')) {
    $('html').css('background', '#ced8d1')
}
//Done
else if($('#done').hasClass('swiper-slide-active')) {
    $('html').css('background', '#7a1e99')
}
})