思路:
- 在圖片旁邊放一個height:0px的DIV,讓jQuery改變高度,產生動畫
DOM樹
<div class="mask col-sm-2 col-md-2">
<a href="#"><img src="img/hd-7.jpg" alt="活動圖片">
</a>
<div class="mask-text">
<div class="mask-header">
<a href="#">活動標題</a>
</div>
<p>活動介紹.....</p>
</div>
</div>
JAVASCRIPT:
$(".mask").hover(
function () {
$(".mask-text", this).stop().animate({
height: "100%"
});
},
function () {
$(".mask-text", this).stop().animate({
height: "0px"
});
});