随着窗口缩小，动画持续时间减少

Question

为什么即使我将此动画的持续时间设置为2秒，缩小窗口会导致首先出现更大的延迟，以及更快的动画？

请参阅Bootply。

JS：

function animateit() {

$('.wrapper .water').animate({
    'height': '350px',
    'top': 0
}, 2000, function () {
    $('.wrapper .water').animate({
        'height': 0,
        'top': '350px'
    }, 2000, animateit);
});

}

animateit();

CSS：

.wrapper {
position: relative;
height:auto;
width: 100%;
max-width: 350px;
overflow:hidden;
}
.img-responsive {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}
.glass {
position:absolute;
left:0px;
top:0px;
z-index:5;
}
.hide-image {
display: block;
opacity: 0;
width: 100%;
}
.water {
position:absolute;
left:0px;
right: 0;
top:350px;
background-color:#67d9ff;
height:0px;
display:block;
}

HTML：

<div class="wrapper">
  <img class="hide-image" src="http://www.videsignz.com/testing/images/water-front2.png">
  <img class="glass img-responsive" src="http://www.videsignz.com/testing/images/water-front2.png">
   <div class="water"></div>
</div>

我注意到，对于动画JS的第二部分，将'top'：'350px'更改为'top'：'100％'导致它的持续时间相对一致，无论窗口大小如何，但将该代码应用于玻璃的填充不会产生相同的结果 - 它也会在正常视图中改变动画。