jQuery animate caption
2021. 12. 8. 11:25ㆍStudy/jQuery
, this
.clearQueue();
CSS
/* CSS Document */
*{margin:0; padding:0}
/* boxgrid Jquery*/
.boxgrid{width: 287px; height: 125px; overflow: hidden; position: relative;
margin:20px}
.boxgrid img{position: absolute; top: 0; left: 0; border: 0;}
.boxgrid dt{padding:5px 10px; color:#fff; font-weight:bold;font-family:arial; font-size:0.923em}
.boxgrid dd{padding:10px 0 0 10px;color:#fff;font-size:0.846em}
.boxcaption{ position: absolute; background:rgba(0,0,0,.7); height: 125px; width: 100%;}
.boxgrid .boxcaption {top:95px; left: 0;} /* top값을 수정한다. */
.boxgrid .boxcaption dd{line-height:1.5em}
.boxgrid .boxcaption a{color:#FCF; text-decoration:none; }
JS
$(document).ready(function(){
$('.boxgrid').hover(function(){ // toggle가능
$(".boxcaption", this).animate({top:0}, 300).clearQueue();
}, function() {
$(".boxcaption", this).animate({top:95}, 300).clearQueue();
});
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="caption.css"rel="stylesheet">
<script src="jquery-1.8.3.min.js"></script>
<script src="caption.js"></script>
</head>
<body>
<ul>
<li class="boxgrid">
<img src="category_img_01.jpg" alt="Learn about donation" />
<dl class="boxcaption">
<dt>Learn about Donation</dt>
<dd>Considering donating blood for the first time, and want to learn more?
<br/><a href="#">View More</a>
</dd>
</dl>
</li>
<li class="boxgrid">
<img src="category_img_02.jpg" alt="Learn about donation" />
<dl class="boxcaption">
<dt>Learn about Donation</dt>
<dd>Considering donating blood for the first time, and want to learn more?
<br/><a href="#">View More</a>
</dd>
</dl>
</li>
<li class="boxgrid">
<img src="category_img_02.jpg" alt="Learn about donation" />
<dl class="boxcaption">
<dt>Learn about Donation</dt>
<dd>Considering donating blood for the first time, and want to learn more?
<br/><a href="#">View More</a>
</dd>
</dl>
</li>
</ul>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery 선택 리스트 박스 (Family Site) (0) | 2021.12.08 |
|---|---|
| jQuery animate rotate (feat.CSS) (0) | 2021.12.08 |
| jQuery animate hover slide (0) | 2021.12.08 |
| jQuery ex animate (0) | 2021.12.08 |
| jQuery animate() feat.easing (0) | 2021.12.08 |
