jQuery: slideDown and fade, loosing the height instantly

Question

I'm looking to fadeIn/fadeOut and slideUp/slideDown at the same time in order to fell or rise the title smoothly.

In this code, try to hover in and hover out. The hover out action makes the title Audi falling instantly.

$(document).ready(function(){
   $("#introgreen .col-md-4").hover(function(){
       $(this).find('.imagep text').slideUp().fadeIn(800);       
       }, function(){
       $(this).find('.imagep text').slideDown().fadeOut(800);       
   });
   
  });

#introgreen img{
 width: 100%;
 position: relative;
}
#introgreen .col-md-4 .wholeimage{
 position: relative;
 width: 100%;
}
#introgreen .imagespan{
 position: absolute;
 left: 0;
 top: 20;
 background-color: #d24f0b;
 padding: 5px 15px;
 font-size: 18px;
 font-weight: bold;
 color: white;
 z-index: 3;
}
#introgreen .imagep{
 display: inline-block;
 border: solid 1px white;
 position: absolute;
 width: 100%;
 left: 0;
 bottom: 0;
 color: white;
 background-color: rgba(0,0,0,0.5);
 height: auto;
 padding: 20px;
}

.imagep text{
    display: none;
}

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

<div id="introgreen">
<div class="col-md-4"><div class="wholeimage"><img src="http://autopazar.co.uk/media/5215/Used_Audi_Q7_2007_Black_4x4_Diesel_Automatic_for_Sale_in_Kent_UK.jpg"><span class="imagespan">10 000</span><span class="imagep"><h3>audi</h3><text>some details of car</text></span></div></div>
</div>

Answer 1

You can set height to #introgreen .imagep and height transition hover effect as below, so using jQuery text fades-in and using CSS hover slideup and down takes place, hope this help.

$(document).ready(function(){
   $("#introgreen .col-md-4").hover(function(){
       $(this).find('.imagep text').fadeIn(800);       
       }, function(){
       $(this).find('.imagep text').fadeOut(800);       
   });
   
  });

#introgreen img{
 width: 100%;
 position: relative;
}
#introgreen .col-md-4 .wholeimage{
 position: relative;
 width: 100%;
}
#introgreen .imagespan{
 position: absolute;
 left: 0;
 top: 20;
 background-color: #d24f0b;
 padding: 5px 15px;
 font-size: 18px;
 font-weight: bold;
 color: white;
 z-index: 3;
}
#introgreen .imagep{
 display: inline-block;
 border: solid 1px white;
 position: absolute;
 width: 100%;
 left: 0;
 bottom: 0;
 color: white;
 background-color: rgba(0,0,0,0.5);
 height:50px;
 padding: 20px;
  transition:height 1s ease;
}
#introgreen .imagep:hover{
  height:100px;
}
.imagep text{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="introgreen">
<div class="col-md-4"><div class="wholeimage"><img src="http://autopazar.co.uk/media/5215/Used_Audi_Q7_2007_Black_4x4_Diesel_Automatic_for_Sale_in_Kent_UK.jpg"><span class="imagespan">10 000</span><span class="imagep"><h3>audi</h3><text>some details of car</text></span></div></div>
</div>