Interpolate or "tween" between two values (but not animating)
<p>I have a variable that is increasing let's say from 0 to 99.</p>

<p>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.</p>

<p>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?</p>

<p>EDIT: Some mock up code (probably has syntax errors ):</p>

<pre><code>&lt;html&gt;

&lt;body&gt;

&lt;div id="increase"&gt;&lt;/div&gt;
&lt;div id="move"&gt;&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt; 

 &lt;script&gt;
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
}


&lt;/script&gt;
</code></pre>
