<style type="text/css">
.css_test {
background : #fff;
border-radius : 5px;
border : 3px solid gray;
margin-top : 10px;
padding : 20px;
position : relative;
text-align : center;
}
.css_test img {
cursor : pointer;
position : relative;
}
/* position:relative; 를 적용해야 애니메이션이 실행됨 */
</style>
<button type="button"
onclick="$('.css_test img')
.click()">점프 높이올라 !!</button>
<button type="button"
onclick="$('.css_test').animate({top:0})">복귀버튼</button>
<div class="css_test">
<img src="//superkts.com/img/css/dog061.gif" />
<img src="//superkts.com/img/css/dog060.gif" />
<img src="//superkts.com/img/css/bird20.gif" />
<img src="//superkts.com/img/css/dog021.gif" />
<img src="//superkts.com/img/css/bird21.gif" />
<img src="//superkts.com/img/css/huk.gif" />
</div>
<script type="text/javascript">
$( '.css_test img' )
.click(function(){
$( this ).animate({ top : '-=100' }, 100, function(){
$( this ).animate({ top : '+=100' }, 100, function(){
$( '.css_test' ).animate({ top : '+=2' }, 10);
});
});
});
</script>