JQuery动画执行中顺序问题

给类名.userModal添加了一个动画，在3 s 内完成top值从初始变为0的动画。执行完毕后，让类名.warp的元素隐藏。

问题：.userModal是向上不断移动，当彻底覆盖浏览器显示区域（Top = 0时），而后把.warp隐藏（该元素的z-index在.userModal之下）。实际动画中，.userModal还没有彻底覆盖.warp时，.warp就已经隐藏了。出现如图所示状况：

应该是内容区到最顶端时，.warp才隐藏，显然，内容区还未置顶，.warp已经被隐藏了（背景是body的灰色了）。

缘由：动画的最后一帧是须要时间的，是基于状态的。.userModal最后一个动画，是当前的Top值与0之间的动画。先将.userModal的Top值设置为0，而后执行最后一帧动画。但问题是，当.userModal的Top值设置为0时，就默认已经完成动画了，如今就开始执行回调函数中的.warp隐藏语句了。而实际上，最后一帧执行的时间，如果大于执行完.warp隐藏语句的时间，就会出现.warp先被隐藏，而后.userModal还未置顶的状况了。按理说，这个差异是很小的，通常看不出来，但若是属性值变化量很大，而动画时间又很小，差异就会很明显了。好比，一样移动100px, 100 s 完成该动画，则每秒只变化1px。若是10 s完成，则每秒要变化10 px，显然，对于10px这么大的距离，眼尖的就已经能发现不是完美衔接了，若动画时间再缩短，则差距愈大，衔接越差。