jQuery：slideDown and fade、即座に高さを失う

Question

タイトルをスムーズに下ろしたり上げたりするために、fadeIn/fadeOutとslideUp/slideDownを同時に探しています。

このコードでは、ホバーしてホバーアウトしてみてください。ホバーアウトアクションは、タイトルAudiを即座に落とします。

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

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

あなたはこのヘルプを願っていますので、jQueryのテキストfades-inを使用してCSSホバーslideupとdownを使用して行われ、以下のように#introgreen .imagepとheight transition hover effectにheightを設定することができます。

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

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