Animating a div in jquery using math.random();

Question

Im currently working on a project that has to update the height of a div (green color) inside a circle by manual data input.

Here is a jsfiddle of the circle im talking about: http://jsfiddle.net/bphs5k8v/

What i need to have happen is the green color to move to random heights within the circle every few seconds (for testing purposes). But i honestly have no clue on how i can accomplish this. I was able to succesfully do this with CSS animations but figured i would need to use javascript for the result of the project anyway.

//HTML
<div class="circle">
        <div id="animateddiv1">
    </div>  
</div>

//CSS
.circle {border-radius: 50%; position: relative; overflow: hidden; background: #8a8a8a; width: 165px; height: 165px; display: inline-block; margin: 0 75px; box-shadow: 0px 4px 2px #191919;}
#animateddiv1 {background: #63B23A; position: absolute; top: 130px; width: 200px; height: 165px;}

I seek your help! thanks :D

Using theses CSS property, you have to change the #animateddiv1 ` top CSS property — pistou
– pistou, Commented Dec 11, 2014 at 11:35

Stewartside · Accepted Answer · 2014-12-11 11:34:59Z

2

You could use keyframes in CSS, as you stated in your question, but its hard to sort of randomise those numbers and you are limited to how many different keyframes you put in.

A simple JS version would be to run a setInterval function which randomly generates a number between 0 and 165px and then push this into the css changing the top position.

Something like this:

$(document).ready(function() {
  setInterval(function() {
    var rand = Math.floor((Math.random() * 165));
    $('#animateddiv1').css('top', rand);
  }, 2000);
});

.circle {
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: #8a8a8a;
  width: 165px;
  height: 165px;
  display: inline-block;
  margin: 0 75px;
  box-shadow: 0px 4px 2px #191919;
}
#animateddiv1 {
  background: #63B23A;
  position: absolute;
  top: 20px;
  width: 200px;
  height: 165px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="circle">
  <div id="animateddiv1">
  </div>
</div>

You can then improve this code to your liking, maybe making it animate through the numbers etc.

answered Dec 11, 2014 at 11:34

Stewartside

21k13 gold badges64 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JJGrootveld Over a year ago

Awesome thank you very much! I was also looking for a smooth transition but some other user already suggested that :-)

Prem Anand · Accepted Answer · 2014-12-11 11:38:52Z

2

Position the inner Div to bottom & Change the value of height on Timeout via Jquery

JQuery

window.setInterval(function(){
value = Math.floor((Math.random() * 100) + 1);
    $("#animateddiv1").css('height',value)
}, 1000);

CSS

.circle {border-radius: 50%; position: relative; overflow: hidden; background: #8a8a8a; width: 165px; height: 165px; display: inline-block; margin: 0 75px; box-shadow: 0px 4px 2px #191919;}

#animateddiv1 {background: #63B23A; position: absolute; bottom:0; width: 200px; height: 165px;}

Fiddle

answered Dec 11, 2014 at 11:38

Prem Anand

1,4962 gold badges13 silver badges31 bronze badges

Comments

sergolius · Accepted Answer · 2014-12-11 11:38:11Z

1

I recommend you to read jQuery docs http://api.jquery.com/animate/

Here example with smooth animation: http://jsfiddle.net/bphs5k8v/8/

$(function () {
    var animated = $('#animateddiv1');

    function animate() {
        animated.animate({
            height: Math.floor(Math.random() * 100) + '%'
        }, 350);
    }

    setInterval(animate, 350);
})

answered Dec 11, 2014 at 11:38

sergolius

4383 silver badges8 bronze badges

Comments

Suchit kumar · Accepted Answer · 2014-12-11 11:38:45Z

0

you can try this:use setInterval to get what you desired.

setInterval(function(){
    $('#animateddiv1').animate({top:Math.floor(Math.random() *180 +5)})
},1000);

.circle {border-radius: 50%; position: relative; overflow: hidden; background: #8a8a8a; width: 165px; height: 165px; display: inline-block; margin: 0 75px; box-shadow: 0px 4px 2px #191919;}
#animateddiv1 {background: #63B23A; position: absolute; top: 130px; width: 200px; height: 165px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
        <div id="animateddiv1">
    </div>  
</div>

answered Dec 11, 2014 at 11:38

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

Collectives™ on Stack Overflow

Animating a div in jquery using math.random();

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related