Question

当用户选择不同的单选按钮值时，我希望在颜色之间进行转换。我现在已经有一个“工作”的例子，只是立即改变了身体的背景颜色，但是我尝试使用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用于transition background-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（）

1 个答案: