Javascript 动画的持续时间随着窗口的缩小而缩短

为什么即使我将此动画的持续时间设置为2秒，缩小窗口也会导致最初的延迟更大，动画速度更快

看

JS:

CSS:

HTML:

---

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

我没有拿出秒表，但当我尝试演示时，动画似乎没有随着我调整浏览器的大小而改变速度。虽然如果窗口足够短，动画的一部分会发生在你看不见的底部。。。

function animateit() {

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

}

animateit();

.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;
}

<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>