逐渐改变背景颜色

change background color progressively

本文关键字：颜色 背景 改变      更新时间：2023-09-26

我有一个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;
}

你在rand上加了0.01，但是你没有在rand之后加1，所以它每次都返回相同的东西:

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

您没有更新rand。我已经更新了你的jsFiddle: http://jsfiddle.net/5378W/3/

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

Try This:

  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);
  }
相关文章：