<style type="text/css">
.css_test td {
height : 200px;
text-align : center;
}
.css_test img {
cursor : pointer;
}
</style>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
<tr>
<td valign="bottom">
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<img src="http://superkts.com/img/bird.gif" />
<br>새를 눌러보세요
</td>
</tr>
</table>
<button type="button" onclick="$('.css_test img').animate({height:'37'}, 500, 'easeInOutBack')">작아지게 하기</button>
<script type="text/javascript">
$('.css_test img').bind('click', function(){
$(this).animate({height:'100'}, 250, 'easeInOutBack');
});
</script>
- height 값을 조절해서 커지게 만드는 예제입니다.
- "제이쿼리 공작소" 오픈 후 다루겠습니다 ^^;