Compute transition animations in JavaScript

Question

I am trying to animate a jump using 3 variables: the jump distance, the height of the jump, and possibly the jump "speed".

Here is a working demo of JSFiddle . However, I would like the animated jump to be the perfect parabola.

var y = 300; var x = 0; var jh = 100; var jw = 200; var c = 0; var inter = setInterval(function () { c++; // if box reaches jump height it should fall down y = (c >= jh) ? y + 1 : y - 1; // if box reaches jump distance if (x == jw) clearInterval(inter); x++; $('.box').css({ 'top': y + 'px', 'left': x + 'px' }); }, 20); 

Answer 1

I think the sine? Assuming jh is the "transition height" and jw is the "distance" without clearing the existing code, you can do something like this:

 var y = 300; var x = 0; var jh = 100; var jw = 200; var c = 0; var speed = 3; var inter = setInterval(function () { c++; y = getHeightAtX(x); if (x >= jw) clearInterval(inter); x+=speed; $('.box').css({ 'bottom': y + 'px', 'left': x + 'px' }); }, 20); function getHeightAtX(x) { return jh*Math.sin(x*Math.PI/jw) };