javascript - 逐步改变背景颜色

Question

我下面有一个 jquery 代码。当用户点击 .bx 时，它会克隆 .bx 并在点击 .bx 后将其插入。现在我想要的是，当添加 .bx 时，.container 的背景应该逐渐从浅色变为深色(灰色)。我的意思是，当在第一个 .bx 之后添加第二个 .bx 时，它的 .container 的颜色应该有一些变化。当添加第二个时，应该添加更多的颜色变化。我正在尝试 rgba 并更改 a 的值，但它不起作用(我不确定为什么)。

我怎样才能完成这项工作？

这里是JSFIDDLE

这里是html

<div class="container">
    <div class="bx"></div>    
</div>

这里是JS

var rand = 0;
$('body').on('click', '.bx', function (e) {
        var clone = $(this).clone();

        $(this).after(clone);

        $('.container').css('background-color', 'rgba(0, 0, 0, ' + getRandom() + ')');
    });

function getRandom(min, max) {
    return rand + 0.01;
}

Answer 1

您要向 rand 添加 0.01，但之后不会增加 rand，因此每次都会返回相同的值:

rand += 0.01; // increment and save
return rand; // then return