Home/ Questions/Q 8347945
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T07:32:15+00:00

I have a variable that is increasing let’s say from 0 to 99. Then

  • 0

I have a variable that is increasing let’s say from 0 to 99.

Then I have a div that I want to move at the same rate of the increasing variable but I only want to define the two ends of the movement (for example moving from top to down, I only define the topmost position and the downmost position). The rest should be interpolated automatically while the main variable is changing it’s value from 0 to 99.

All the search results I got were related to animating. But this is not exactly animating since the div should not move if the variable is not changing. How would you do this best in javascript?

EDIT: Some mock up code (probably has syntax errors ):

<html>

<body>

<div id="increase"></div>
<div id="move"></div>

</body>

</html> 

 <script>
var counter =0;
var topValue =50;
var bottomValue =150;
var interpolatedValue


$('#increase').click(){
counter++; 
}

$('#move').css(){
top: interpolatedValue; //this should be an interpolation between 50 and 150 based on the current counter value
}


</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If the top and bottom were 400 and 600 for instance, you can calculate the position based on the variable with some simple math.

    var theVariable = 25; // 1 to 100
var top = 400;
var bottom = 600;
var distance = bottom - top;
var position = top + ((theVariable / 100) * distance); // 450
    • 0