如何使用单一元素的动画背景

Question

我正在制作这个演示。可以使用jQuery动画更改元素的背景颜色吗？

$('#change').on('click', function () {
    $('body').animate({background:'rgba(0,0,0,0.4)'}, 300);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="change">Change BG</button>

Answer 1

我可以提供替代方法吗？有很多jQuery插件可以执行这种操作，但是对于您正在执行的操作而言，这太过分了。

背景，尤其是background-color可通过CSS设置动画，因此我建议使用以下过渡属性：

https://codepen.io/EightArmsHQ/pen/GwqMpR

HTML：

$("#change").click(function(){
  $("body").addClass("green");
})

CSS：

body{
  transition: background 1s;
}

body.green{
  background:green;
}