javascript - jQuery:slideDown 和淡入淡出，立即失去高度

Question

我希望同时进行淡入/淡出和 slideUp/slideDown，以便平稳地下降或上升标题。

在此代码中，尝试将鼠标悬停在内部并悬停在外部。悬停 Action 使标题 Audi 立即下降。

$(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

您可以将 height 设置为 #introgreen .imagep 和 height transition hover effect 如下所示，因此使用 jQuery 文本 fades-在 中并使用 CSS 悬停 slideup 和 down 发生，希望对您有所帮助。

$(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>