如何使用 jQuery click() 在颜色之间转换

Question

我希望在用户选择不同的单选按钮值时在颜色之间进行转换。我现在已经有一个 'working' 例子，只是立即改变了主体的背景颜色，但是我尝试使用 fadeOut() 和 fadeTo() 方法，但没有用。

这就是我到目前为止所拥有的，如果有人可以指出我应该改变的地方以及使用哪种方法。

非常感谢！

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

可以使用css到transitionbackground-color。我还稍微修改了你的 jquery，但你需要做的就是从这个答案中添加 CSS。

$('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">

如何使用 jQuery click() 在颜色之间转换

How to transition between colours using jQuery click()

javascript

css

jquery

background-color

document-body