jQuery easing; illustrated

JavaScript is required for this page to run...

Select an easing function from above menu.
The box below will animate using that function and then a graph will appear showing that animation (black dots) against the ideal curve (white line). The X-axis is time, the Y-axis can be thought of as distance or progression. Each black dot (with a white border) signifies when jQuery actually changed a CSS property. (Note: old curves fade into the background; for comparison)