jquery - jQuery.animate() causes an offset

Question

does anyone know which things can cause an offset during an animation with jQuery.animate()? When you click on my link below you will find an animation with jQuery. The problem there is, that the top element causes an offset or it is to fast at the start. I tried nearly everything to synchronize these two elements but I screwed up for hours.

Offset in animation

At first I rebuilt the css & javascript cause I thought it is a problem when I try to animate the height for one element and the "bottom" for the other one. So changed everything that I only alter the "bottom" style.

But the result is the same. Then I changed the duration of each animation. Again ... No luck!

And there was many other things I changed in the CSS and Javascript but also no luck.

Maybe I don't understand the .animate from jQuery and there is something I didn't see in it.

Answer 1

The problem is that waterLevelTop starts bellow waterLevel and end in the middle of waterLevel. I guess you want it to be in the middle all the time. To fix that just add min-height: 20px; to the .bottle .waterLevelTop block.

EDIT: I created a fork to show "the fix" http://codepen.io/anon/pen/Bledw