Jquery 将两个对象设置为同一点的动画，但其中一个较低

我正在尝试设置两个对象的动画，它们从同一位置开始，最后到达同一点。然而，即使在我的页面上显示它们具有相同的

top

值，它们也不在同一位置

此外，为了清晰起见，我需要使用与演示中相同的

position

属性，我知道使用

position:absolute会更容易但它不是我当前项目的选项


$（'#background'）。单击（函数（）{
var sqT=$（'#sq green'）.offset（）.top-100；
$（'平方绿色，'平方蓝色'）。设置动画({
“顶部”：-sqT
})
})
#背景{
背景：#ccc；
高度：100vh；
宽度：100%；
溢出：隐藏；
}
#方形容器{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.sq{
高度：4em；
宽度：4em；
位置：相对位置；
}
#平方绿{
背景：绿色；
顶部：4em；
}
#方蓝{
背景#337ab7；
}
最初，由于使用CSS为绿色元素提供的
top
值，这两个元素位于同一位置。如果此设置不存在，则它们将是一个低于另一个

#sq-green {
    background: green;
    top: 4em; /* this is the reason why they are present in same position */
}

4em的
top
值等于绿色元素的高度，因此它被其自身的高度推到下方，因此最终与蓝色元素处于相同的位置

如果在动画之后，它们也需要处于相同的位置，则需要获取绿色元素的
高度
，并将其添加到计算值中

$('#backdrop').click(function() {
  var sqT = $('#sq-green').offset().top - 100;
  var height = $('#sq-green').height();
  $('#sq-green').animate({
    'top': -sqT + height
  });
  $('#sq-blue').animate({
    'top': -sqT
  });
})


$（'#background'）。单击（函数（）{
var sqT=$（'#sq green'）.offset（）.top-100；
变量高度=$（'#sq绿色'）。高度（）；
$（'#sq绿色'）。设置动画({
“顶部”：-sqT+高度
});
$（'#sq blue'）。设置动画({
“顶部”：-sqT
});
})
#背景{
背景：#ccc；
高度：100vh；
宽度：100%；
溢出：隐藏；
}
#方形容器{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.sq{
高度：4em；
宽度：4em；
位置：相对位置；
}
#平方绿{
背景：绿色；
顶部：4em；
}
#方蓝{
背景#337ab7；
}