jQuery 공작소 : 새키우기
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
새키우기 입니다. 클릭하면 새가 커지죠.
정직한 제목. 정직한 내용.
예제 1
애니메이션 메서드와 이징효과를 이용한 간단한 예제입니다
보기
새를 눌러보세요!
|
소스
<style type="text/css">
.css_test {
border-radius : 5px;
border : 5px solid gray;
height : 150px;
padding : 5px;
text-align : center;
width : 100%;
}
.css_test img {
cursor : pointer;
vertical-align : bottom;
}
</style>
새를 눌러보세요!<br><br>
<table class="css_test" cellpadding="0" cellspacing="0">
<tr>
<td valign="bottom">
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
</td>
</tr>
</table>
<button class="mt10" 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:'120'}, 250, 'easeInOutBack');
});
</script>
.css_test {
border-radius : 5px;
border : 5px solid gray;
height : 150px;
padding : 5px;
text-align : center;
width : 100%;
}
.css_test img {
cursor : pointer;
vertical-align : bottom;
}
</style>
새를 눌러보세요!<br><br>
<table class="css_test" cellpadding="0" cellspacing="0">
<tr>
<td valign="bottom">
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
<img src="//superkts.com/img/bird.gif" />
</td>
</tr>
</table>
<button class="mt10" 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:'120'}, 250, 'easeInOutBack');
});
</script>
관련 CSS
jQuery