Javascript Jquery使用内联块div设置动画不起作用？

有人能告诉我我做错了什么或者为什么这个代码不起作用吗？我想这是显而易见的，我正在尝试，但动画似乎拉下来的其他div。我不知道发生了什么事

$（“#选项门”）。单击（函数（）{
$（此）。设置动画({
高度：“50px”，
线宽：“50px”
});     
});

*{
边际：0px；
填充：0px；
}
身体{
边际：0px；
填充：0px；
}
div{
框大小：边框框；
边际：0px；
填充：0px；
}
分区#主容器{
位置：相对位置；
宽度：950px；
高度：1000px；
边框：2倍纯绿；
保证金：0px自动；
}   
#产品选择{
位置：相对位置；
宽度：100%；
}
#产品选择部{
显示：内联块；
位置：相对位置；
宽度：236.5px；
高度：40px；
文本对齐：居中；
线高：40px；
垂直对齐：中间对齐；
右边框：1px纯黑；
边框底部：1px纯黑；
光标：指针；
}
#productChoice分区：最后一个孩子{
边界权：无；
}

选择1
选择2
选择3
选择4

这里有一个例子，所以很清楚发生了什么

问题在于

#productChoice div

的样式为

垂直对齐：中间设置。因此，当您增加第一个div的大小时，所有其他div都会向下对齐，因为#productChoice的大小已经增加，以满足其更大的第一个孩子的需要

将此样式更改为
垂直对齐：顶部以解决问题。
进一步解释以使问题变得明显。下拉哪个
div
？
optionDoors
的初始高度是多少？我将链接到一个工作示例！谢谢这总是显而易见的！只是好奇，默认对齐方式是什么？因为去掉垂直对齐属性：值的效果与之前相同，所以这是否意味着如果不设置它，它的默认值是“中间”？默认值是基线