如何使用jQuery click（）在颜色之间进行转换

Question

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!");
  });
});

Answer 1

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">