我希望同时进行淡入/淡出和 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>
最佳答案
您可以将 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>
关于javascript - jQuery:slideDown 和淡入淡出,立即失去高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41312681/