<style type="text/css">
.css_test {
border : 5px solid silver;
margin-top : 10px;
padding-top : 50px;
padding : 5px;
width : 100%;
}
.css_test td {
height : 150px;
text-align : center;
}
.css_test .new { /* 새로 추가되는 이미지에 사용할 CSS */
position : relative;
top : -200px;
z-index : 10;
}
</style>
어떤 사람이 살았어요. 그런데 ...<br><br>
<button type="button"
onclick="j_test('//superkts.com/img/css/huk.gif')">뒤에 사람있어요</button>
<button type="button"
onclick="j_test('//superkts.com/img/css/dog061.gif')">뒤에 개있어요</button>
<button type="button"
onclick="j_test('//superkts.com/img/css/bird20.gif')">뒤에 새있어요</button>
<button type="button"
onclick="j_test('//superkts.com/img/css/bird34.gif')">뒤에 닭있어요</button>
<br>
<table class="css_test" cellpadding="0" cellspacing="0">
<tr>
<td valign="bottom"><img src="//superkts.com/img/css/huk.gif" /></td>
</tr>
</table>
<script type="text/javascript">
function j_test(src){
$('<img class="new" src="' + src + '" />')
.appendTo('.css_test td').animate({top:0}, 1000, 'easeOutBounce');
}
</script>