Strange slider jquery animation behaviour

Strange slider jquery animation behaviour

Hi,

I'm building a slider. Almost everything is finished -- but there's one issue, when a slide animates across the screen it does so normally until the halfway point and then after that it travels the remaining half incredibly quickly. Also at this halfway point the animation completion callback runs.

This is the fiddle of my code: https://jsfiddle.net/90j6mod3/
This is a fiddle of how the slider should animate: https://jsfiddle.net/87bh59p4/

I've tried alternate ways of calling the animate function, and specifically using "done", "complete", and also trying .promise().done(...) but the result was the same each time.

I can't see why this is happening. Would appreciate any input.