<style type="text/css">
.css_test {
border-radius : 5px;
border : 5px solid gray;
padding : 5px;
}
.css_test img {
cursor : pointer;
position : relative;
}
</style>
<div class="css_test">
<img src="//superkts.com/img/css/bird17.gif" />
<img src="//superkts.com/img/css/cat051.gif" />
<img src="//superkts.com/img/css/dog061.gif" />
<img src="//superkts.com/img/css/bird30.gif" />
<img src="//superkts.com/img/css/dog060.gif" />
<img src="//superkts.com/img/css/bird20.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/shiba2.gif" />
<br><br>
<div>동물들을 클릭해 보세요</div>
</div>
<script type="text/javascript">
$('.css_test img').bind( 'click', function(){
j_test(this);
});
function j_test(o){
$('.css_test div').html( '클릭한 동물의 너비는 ' + $(o)
.width() + 'px');
$(o).animate( {top : -50}, 100, function(){
$(this).animate( {top : 0}, 100);
});
}
</script>