逐步更改背景颜色

Question

我有一个jQuery代码如下。当用户点击.bx时它会执行什么操作，它会克隆.bx并在单击.bx后插入它。现在我想要的是，当.bx被添加，然后.container的背景应该从浅变暗（灰色）渐进。我的意思是当第二个.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

你加入0.01兰特，但你是不是递增兰特算账，所以它每次都返回相同的东西：

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

Answer 2

您尚未更新rand。我已经更新您的jsfiddle：http://jsfiddle.net/5378W/3/

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

Answer 3

试试这个：

var rand = 0; 
    $('body').on('click', '.bx', function (e) { 
    var clone = $(this).clone(); 
    $(this).after(clone); 
    rand = Math.floor(Math.random() * 254) + 1 
    $('.container').css('background','rgb(255,'+getRandom(rand)+','+getRandom(rand)+')'); 
    }); 

    function getRandom(rand) { 
    return parseInt(rand); 
    }