[FIXED] How to transition between colours using jQuery click()

Issue

im looking to transition between colours when a user selects different radio button values. I already have a 'working' example at the moment with just the immediate changing of the body's background colour, however i tried to use the fadeOut() and fadeTo() methods, but to no avail.

here's what i have thus far, if someone could point me to where i should be altering and which method to utilise.

many thanks in advance!

colourChange.js

$(document).ready(function () {

  $("#goodRad").click(function () {

        $("body").css('background-color', '#90EE90');//LightGreen
        console.log("make body green!");
  });

  $("#okRad").click(function () {

        $("body").css('background-color', '#FFA07A');//LightSalmon
        console.log("make body amber!");
  });

  $("#badRad").click(function () {

        $("body").css('background-color', '#F08080');//LightCoral
        console.log("make body red!");
  });
});

Solution

You can use css to transition background-color. I also reworked your jquery to a little, but all you need to do is add the CSS from this answer.

$('input').on('change',function() {
  $('body').css('background-color',$(this).attr('data-color'));
})

body {
  transition: background-color .5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="color" data-color="#90EE90" type="radio"><input name="color" data-color="#FFA07A" type="radio"><input name="color" data-color="#F08080" type="radio">

Answered By - Michael Coker

Answer Checked By - Pedro (PHPFixing Volunteer)