CODEWITHSUNDEEP
javascriptjqueryhtml
Om3ga
Om3ga

Reputation: 32853

change background color progressively

I have a jquery code below. What it does it when user click on .bx, it clones .bx and insets it after clicked .bx. Now what I want is when .bx is added then the background of .container should change from light to darker(grey) progressively. I mean when second .bx is added after the first one then there should be a little change it .container's color. When second is added then a little more change in the color should be added. I am trying rgba and changing the value of a, but it is not working(I am not sure why).

How can I make this work?

Here is JSFIDDLE

Here is html

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

Here is 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;
}

Upvotes: 0

Views: 394

Answers (3)

Sandeep Pal
Sandeep Pal

Reputation: 2175

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);
  }

Upvotes: 0

sina72
sina72

Reputation: 5101

You are not updating rand. I have updated your jsFiddle: http://jsfiddle.net/5378W/3/

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

Upvotes: 1

Dennis
Dennis

Reputation: 32598

You are adding 0.01 to rand, but you aren't incrementing rand afterwards, so it returns the same thing every time:

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

Upvotes: 1

Related Questions