CODEWITHSUNDEEP
javascriptrequestanimationframe
Davi Carleial
Davi Carleial

Reputation: 21

requestAnimationFrame() not refreshing

I'm learning how to use requestAnimationFrame() and the animation changes when refreshing the page. Shouldn't it should continuously change the font size without having to refresh it? 

var x = Math.floor((Math.random() * 100));

function draw(){
  for (i=0; i < 100; i++){
    $("#lw").css("font-size", x);
  }
  requestAnimationFrame(draw);
}

requestAnimationFrame(draw);

Upvotes: 1

Views: 405

Answers (2)

Luple
Luple

Reputation: 491

The problem is that your loop is setting the css to the value of x. Which is set outside of the loop. If you want the size to get bigger set the font size to i instead of x

Upvotes: 0

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21758

requestAnimationFrame is working like it's supposed to. You're never changing the conditions between calls or loop iterations.

function draw(){
  for (var i = 0, x = Math.floor((Math.random() * 100)); i < x; i++){
    $("#lw").css("font-size", i);
  }
  requestAnimationFrame(draw);
}

requestAnimationFrame(draw);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="lw">Test</span>

Upvotes: 1

Related Questions