Javascript 更多流体悬停动画

您好，我正在尝试使用JQuery创建一个流体动画，其中您将鼠标悬停在图片上，然后图片和文本都展开。然而，它看起来不太流畅，我也不得不硬编码其他div的反应方式

有没有什么办法，当div被展开时，其他div会自动下降。还有什么是我应该做的，以使文本变得更大，在一个顺利的方式

$（文档）.ready（函数（）{
$（“#mLoveless img”）.hover（函数（）{
可爱的铲子（）；
}，函数（）{
规范化（）；
});
});
$（文档）.ready（函数（）{
$（“#vGod img”）.hover（函数（）{
godhaver（）；
}，函数（）{
规范化（）；
});
});
$（文档）.ready（函数（）{
$（“#pScilla img”）.hover（函数（）{
scillaHover（）；
}，函数（）{
规范化（）；
});
});
$（文档）.ready（函数（）{
$（“#dBo img”）.hover（函数（）{
boHover（）；
}，函数（）{
规范化（）；
});
});
var increaseLove=函数（）
{  
$（“#mLoveless img”）.stop（）.animate({
宽度：“400px”，
高度：'275px'
}，{持续时间：500，队列：false}）；
$（“#mLoveless.imageText3”）.css（“字体大小”，“15px”）；
$（“#mLoveless.imageText1”）.css（“字体大小”，“18px”）；
$（“#mLoveless.imageText2”）.css（“字体大小”，“18px”）；
}
var increaseGod=函数（）
{           
$（“#vGod img”）.stop（）.animate({
宽度：“400px”，
高度：'275px'
}，{持续时间：500，队列：false}）；
$（“#vGod.imageText1”）.css（“字体大小”，“18px”）；
$（“#vGod.imageText2”）.css（“字体大小”，“18px”）；
$（“#vGod.imageText3”）.css（“字体大小”，“15px”）；
}
var increaseScilla=函数（）
{           
$（“#pScilla img”）.stop（）.animate({
宽度：“400px”，
高度：'275px'
}，{持续时间：500，队列：false}）；
$（“#pScilla.imageText1”）.css（“字体大小”，“18px”）；
$（“#pScilla.imageText2”）.css（“字体大小”，“18px”）；
$（“#pScilla.imageText3”）.css（“字体大小”，“15px”）；
}
var increaseBo=函数（）
{           
$（“#dBo img”）.stop（）.animate({
宽度：“400px”，
高度：'275px'
}，{持续时间：500，队列：false}）；
$（“#dBo.imageText1”）.css（“字体大小”，“18px”）；
$（“#dBo.imageText2”）.css（“字体大小”，“18px”）；
$（“#dBo.imageText3”）.css（“字体大小”，“15px”）；
}
var decreaseLove=函数（）
{
$（“#mLoveless img”）.stop（）.animate({
宽度：“40px”，
高度：'40px'
}，{持续时间：200，队列：false}）；
$（“#mLoveless.imageText1”）.css（“字体大小”，“9px”）；
$（“#mLoveless.imageText2”）.css（“字体大小”，“9px”）；
}
var decreaseGod=函数（）
{
var边际因子；
如果（当前悬停==“无爱”）
{            
边际因子='90px'；
}
else if（currentHover==“scilla”）
{
边际因子='-50px'；
}
否则如果（当前悬停==“bo”）
{
marginFactor='-50px'
}      
$（“#vGod”）.stop（）.animate({
marginTop:marginFactor
}，{持续时间：200，队列：false}）；
}
var decreasScilla=函数（）
{
var边际因子；
如果（当前悬停==“无爱”）
{            
边际因子='-50px'；
}
else if（currentHover==“上帝”）
{
边际因子='90px'；
}
否则如果（当前悬停==“bo”）
{
marginFactor='-50px'
}
$（“#pScilla”）.stop（）.animate({
marginTop:marginFactor
}，{持续时间：200，队列：false}）；
}
var decreaseBo=函数（）
{
var边际因子；
如果（当前悬停==“无爱”）
{            
边际因子='-50px'；
}
else if（currentHover==“上帝”）
{
边际因子='-50px'；
}
else if（currentHover==“scilla”）
{
边际因子='90px'；
}
$（“#dBo”）.stop（）.animate({
marginTop:marginFactor
}，{持续时间：200，队列：false}）；
}
var lovelessHover=函数（）
{         
currentHover=“无爱”；
减少上帝（）；
setTimeout（函数（）{
增加爱；
}, 250);      
}
var godhaver=函数（）
{
currentHover=“上帝”；
减少脊髓损伤（）；
setTimeout（函数（）{
增加上帝（）；
}, 250);        
}
var scillahaver=函数（）
{
currentHover=“scilla”；
减量化bo（）；
setTimeout（函数（）{
增加Scilla（）；
}, 250);       
}
var boHover=函数（）
{
currentHover=“bo”；
增加bo（）；
}
var normalize=函数（）
{
$（.imageText1”）.css（“字体大小”，“15px”）；
$（.imageText2”）.css（“字体大小”，“15px”）；
$（“.imageText3”）.css（“字体大小”，“12px”）；
$（“.imagebox img”）.stop（）.animate({
宽度：'250px'，
高度：'200px'
}，{持续时间：500，队列：false}）；
$（“#vGod”）.stop（）.animate({
玛金托普：“20px”
}，{持续时间：200，队列：false}）；
$（“#pScilla”）.stop（）.animate({
玛金托普：“20px”
}，{持续时间：200，队列：false}）；
$（“#dBo”）.stop（）.animate({
玛金托普：“20px”
}，{持续时间：200，队列：false}）；
}

#整个页面
{
位置：绝对位置；
宽度：1200px；
身高：100%；
左：80px；
}
#主页
{
位置：绝对位置；
最高：20%；
宽度：100%；
身高：80%；
左：70像素；
}
.topText
{
显示器：flex；
弯曲方向：行；
}
.文本框
{
显示器：flex；
弯曲方向：立柱；
}
.图像框
{       
显示器：flex；
弯曲方向：行；
宽度：100%；
高度：200px；
过渡：全部5秒；
z指数：1；
}
#无爱的
{
边缘顶部：10px；
}
#vGod
{
边缘顶部：20px；
}
#普西拉
{
边缘顶部：20px；
}
#dBo
{
边缘顶部：20px；
}
.imageText1
{
字体系列：“未来媒体”；
}
.imageText2
{
字体系列：“CourierNewBold”；
}
.imageTex