更流畅的悬停动画

Question

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

我有什么方法可以解决这个问题，当div扩展时，其他的会自动消失。还有什么我应该做的让文本变得更加平滑。

$(document).ready(function(){
    $("#mLoveless img").hover(function(){
               lovelessHover();
        }, function(){
      normalize();
    });
});

$(document).ready(function(){
    $("#vGod img").hover(function(){
       godHover();
       
        }, function(){
            
       normalize();
    });
});

$(document).ready(function(){
    $("#pScilla img").hover(function(){
       scillaHover();
       
        }, function(){
       normalize();
    });
});

$(document).ready(function(){
    $("#dBo img").hover(function(){
       boHover();
       
        }, function(){
       normalize();
    });
});

var increaseLove = function()
{  
      $("#mLoveless img").stop().animate({
       width: '400px',
       height:'275px'
    }, { duration: 500, queue: false });
       
     $("#mLoveless .imageText3").css("font-size", "15px");
     $("#mLoveless .imageText1").css("font-size", "18px");
     $("#mLoveless .imageText2").css("font-size", "18px");     
}

var increaseGod = function()
{           
    $("#vGod img").stop().animate({
       width: '400px',
       height:'275px'
    }, { duration: 500, queue: false });
    
     $("#vGod .imageText1").css("font-size", "18px");
     $("#vGod .imageText2").css("font-size", "18px");
     $("#vGod .imageText3").css("font-size", "15px");
}

var increaseScilla = function()
{           
    $("#pScilla img").stop().animate({
       width: '400px',
       height:'275px'
    }, { duration:500, queue: false });
    
     $("#pScilla .imageText1").css("font-size", "18px");
     $("#pScilla .imageText2").css("font-size", "18px");
     $("#pScilla .imageText3").css("font-size", "15px");
}

var increaseBo = function()
{           
    $("#dBo img").stop().animate({
       width: '400px',
       height:'275px'
    }, { duration: 500, queue: false });
    
     $("#dBo .imageText1").css("font-size", "18px");
     $("#dBo .imageText2").css("font-size", "18px");
     $("#dBo .imageText3").css("font-size", "15px");
}

var decreaseLove = function()
{
    $("#mLoveless img").stop().animate({
       width: '40px',
       height:'40px'
    }, { duration: 200, queue: false });

     $("#mLoveless .imageText1").css("font-size", "9px");
     $("#mLoveless .imageText2").css("font-size", "9px"); 
}

var decreaseGod = function()
{
    var marginFactor;
    if(currentHover == "loveless")
    {            
        marginFactor = '90px';
    }
    else if (currentHover == "scilla")
    {
        marginFactor = '-50px';
    }
     else if (currentHover == "bo")
    {
        marginFactor = '-50px'
    }      

    $("#vGod").stop().animate({
       marginTop: marginFactor
    }, { duration: 200, queue: false });       
}

var decreaseScilla = function()
{
    var marginFactor;
    if(currentHover == "loveless")
    {            
        marginFactor = '-50px';
    }
    
    else if (currentHover == "god")
    {
        marginFactor = '90px';
    }
    
    else if (currentHover == "bo")
    {
        marginFactor = '-50px'
    }
    
    $("#pScilla").stop().animate({
       marginTop: marginFactor
    }, { duration: 200, queue: false });        
}

var decreaseBo = function()
{
    var marginFactor;
    if(currentHover == "loveless")
    {            
        marginFactor = '-50px';
    }
    
    else if (currentHover == "god")
    {
        marginFactor = '-50px';
    }
    
    else if (currentHover == "scilla")
    {
        marginFactor = '90px';
    }
    
     $("#dBo").stop().animate({
       marginTop: marginFactor
    }, { duration: 200, queue: false });        
}
    
var lovelessHover = function()
{         
    currentHover = "loveless";
    decreaseGod();
      setTimeout(function(){
              increaseLove();
                   }, 250);      
}

var godHover = function()
{
    currentHover = "god";
  decreaseScilla();
   setTimeout(function(){
              increaseGod();
                   }, 250);        
}

var scillaHover = function()
{
    currentHover = "scilla";
   decreaseBo();
    setTimeout(function(){
              increaseScilla();
                   }, 250);       
}

var boHover = function()
{
    currentHover = "bo";
    increaseBo();        
}

var normalize = function()
{
  $(".imageText1").css("font-size", "15px");
  $(".imageText2").css("font-size", "15px");
  $(".imageText3").css("font-size", "12px");
  
     $(".imageBoxes img").stop().animate({
       width: '250px',
       height:'200px'
    }, { duration: 500, queue: false });
    
     $("#vGod").stop().animate({
       marginTop: '20px'
    }, { duration: 200, queue: false });
    
     $("#pScilla").stop().animate({
       marginTop: '20px'
    }, { duration: 200, queue: false });
    
     $("#dBo").stop().animate({
       marginTop: '20px'
    }, { duration: 200, queue: false });
}

#entirePage
{
    position: absolute;
    width:1200px;
    height: 100%;
    left:80px;
}

#mainPage
{
    position: absolute;
    top: 20%;
  width:100%;
    
    height:80%;
    left:70px;
}

.topText
{
    display: flex;
    flex-direction:row;
}

.textBoxes
{
    display: flex;
    flex-direction:column;
}

.imageBoxes
{       
    display:flex;
    flex-direction:row;
    
    width:100%;
    height:200px;
    transition:all .5s;
    z-index: 1;
}

#mLoveless
{
    margin-top: 10px;
}

#vGod
{
    margin-top:20px;
}

#pScilla
{
    margin-top: 20px;
}

#dBo
{
    margin-top: 20px;
}

.imageText1
{
    font-family: 'FuturaMedium';       
}

.imageText2
{
    font-family: 'CourierNewBold';       
}

.imageText1,.imageText2
{
    color:black;
    margin-left: 30px;
    font-size:15px;
    font-weight: bold;
    letter-spacing: 5px;
    transition:all .5s;
}

.imageText1
{
   margin-top: -1px;      
}

.imageText2
{
    margin-top: 4px;
}

.bottomText
{          
    max-height: 100%;
    max-width: 800px; 
}

.imageText3
{
    margin-top: 3px;
    color:black;
    margin-left: 30px;
    font-family: 'FuturaMedium';
    font-size:13px;
  transition: background-color .2s ease-out;       
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

       <div id = "entirePage">
            <div id = mainPage>
             <div id = founderBox>
                <h1 id="founder">OUR FOUNDERS</h1> 
                </div>
                <div class="imageBoxes" id="mLoveless">
                 
                    <img src = "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13532032_1604588203204336_1875659176_n.jpg?ig_cache_key=MTI4NDI2NjgxNDQ5MDEzNzU1Mw%3D%3D.2" width="250px" height="200px">
                    <div class = "textBoxes">
                  <p class = "imageText1">CEO & PRESIDENT :</p> <p class = "imageText2"> John Doe</p>
                  <div class = 'bottomText'>
                 <p class = "imageText3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet nunc ac lacus hendrerit aliquet. Duis nec vestibulum odio. Etiam gravida pharetra tortor, nec varius lorem mattis nec. Curabitur eget erat ultricies, egestas odio non, elementum lectus. Suspendisse quis sapien et odio sagittis bibendum. Aliquam nec orci semper, malesuada mi nec, mattis nisl. Aenean quis ex ornare, sollicitudin velit nec, tempor sem. Ut id erat dignissim, cursus leo vitae, molestie felis. Curabitur condimentum quis nunc vel dapibus. Donec sit amet nibh vitae orci ultricies pharetra sed quis sapien. Morbi est turpis, sodales id dictum a, commodo eu neque. Morbi luctus justo non leo vehicula, et ornare nisl convallis. Vivamus cursus sapien ac vehicula sollicitudin. Maecenas dignissim neque eu imperdiet elementum. Vivamus quis auctor lectus, ullamcorper elementum lectus. In hac habitasse platea dictumst. Nulla orci tellus, varius faucibus elementum nec, aliquam a neque. Praesent tempor luctus fringilla. Nulla eget felis ut urna pretium auctor vel a quam.
                 </p>
                  </div>
                    </div>
                </div> 
    
                <div class="imageBoxes" id="vGod">
                     <img src = "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13532032_1604588203204336_1875659176_n.jpg?ig_cache_key=MTI4NDI2NjgxNDQ5MDEzNzU1Mw%3D%3D.2" width="250px" height="200px">
                     <div class = "textBoxes">
                     
                    <p class = "imageText1">VP PRODUCT DEVELOPMENT :</p> <p class = "imageText2"> John Doe</p>
                     <div class = 'bottomText'>
                      <p class = imageText3>
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet nunc ac lacus hendrerit aliquet. Duis nec vestibulum odio. Etiam gravida pharetra tortor, nec varius lorem mattis nec. Curabitur eget erat ultricies, egestas odio non, elementum lectus. Suspendisse quis sapien et odio sagittis bibendum. Aliquam nec orci semper, malesuada mi nec, mattis nisl. Aenean quis ex ornare, sollicitudin velit nec, tempor sem. Ut id erat dignissim, cursus leo vitae, molestie felis. Curabitur condimentum quis nunc vel dapibus. Donec sit amet nibh vitae orci ultricies pharetra sed quis sapien. Morbi est turpis, sodales id dictum a, commodo eu neque. Morbi luctus justo non leo vehicula, et ornare nisl convallis.
Vivamus cursus sapien ac vehicula sollicitudin. Maecenas dignissim neque eu imperdiet elementum. Vivamus quis auctor lectus, ullamcorper elementum lectus. In hac habitasse platea dictumst. Nulla orci tellus, varius faucibus elementum nec, aliquam a neque. Praesent tempor luctus fringilla. Nulla eget felis ut urna pretium auctor vel a quam.
                       </p>
                       </div>
                      </div>
                      </div>
                   
                 <div class="imageBoxes" id="pScilla">
                     <img src = "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13532032_1604588203204336_1875659176_n.jpg?ig_cache_key=MTI4NDI2NjgxNDQ5MDEzNzU1Mw%3D%3D.2" width="250px" height="200px">
                     <div class = "textBoxes">
                      <p class = "imageText1">VP SUPPLY CHAIN INNOVATION :</p> <p class = "imageText2"> John Doe</p>
                      <div class = 'bottomText'>
                      <p class = imageText3>
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet nunc ac lacus hendrerit aliquet. Duis nec vestibulum odio. Etiam gravida pharetra tortor, nec varius lorem mattis nec. Curabitur eget erat ultricies, egestas odio non, elementum lectus. Suspendisse quis sapien et odio sagittis bibendum. Aliquam nec orci semper, malesuada mi nec, mattis nisl. Aenean quis ex ornare, sollicitudin velit nec, tempor sem. Ut id erat dignissim, cursus leo vitae, molestie felis. Curabitur condimentum quis nunc vel dapibus. Donec sit amet nibh vitae orci ultricies pharetra sed quis sapien. Morbi est turpis, sodales id dictum a, commodo eu neque. Morbi luctus justo non leo vehicula, et ornare nisl convallis.
Vivamus cursus sapien ac vehicula sollicitudin. Maecenas dignissim neque eu imperdiet elementum. Vivamus quis auctor lectus, ullamcorper elementum lectus. In hac habitasse platea dictumst. Nulla orci tellus, varius faucibus elementum nec, aliquam a neque. Praesent tempor luctus fringilla. Nulla eget felis ut urna pretium auctor vel a quam.
                       </p>
                       </div>
                      </div>
                </div>
                 <div class="imageBoxes" id="dBo">
                      <img src = "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13532032_1604588203204336_1875659176_n.jpg?ig_cache_key=MTI4NDI2NjgxNDQ5MDEzNzU1Mw%3D%3D.2" width="250px" height="200px">
                      <div class = "textBoxes">
                      <p class = "imageText1">VP CLOUD SOLUTIONS & STRATEGIES :</p> <p class = "imageText2"> John Doe</p>
                                            <div class = 'bottomText'>
                      <p class = imageText3>
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet nunc ac lacus hendrerit aliquet. Duis nec vestibulum odio. Etiam gravida pharetra tortor, nec varius lorem mattis nec. Curabitur eget erat ultricies, egestas odio non, elementum lectus. Suspendisse quis sapien et odio sagittis bibendum. Aliquam nec orci semper, malesuada mi nec, mattis nisl. Aenean quis ex ornare, sollicitudin velit nec, tempor sem. Ut id erat dignissim, cursus leo vitae, molestie felis. Curabitur condimentum quis nunc vel dapibus. Donec sit amet nibh vitae orci ultricies pharetra sed quis sapien. Morbi est turpis, sodales id dictum a, commodo eu neque. Morbi luctus justo non leo vehicula, et ornare nisl convallis.
Vivamus cursus sapien ac vehicula sollicitudin. Maecenas dignissim neque eu imperdiet elementum. Vivamus quis auctor lectus, ullamcorper elementum lectus. In hac habitasse platea dictumst. Nulla orci tellus, varius faucibus elementum nec, aliquam a neque. Praesent tempor luctus fringilla. Nulla eget felis ut urna pretium auctor vel a quam.
                       </p>
                       </div>
                      </div>
                </div>
            </div>               
        </div>