<style type="text/css">
.css_test {
border : 5px solid silver;
margin-top : 10px;
padding : 5px;
text-align : center;
}
.css_test .dogbox {
border-radius : 5px;
border : 5px solid gray;
display : inline-block;
padding : 5px;
}
.css_test .new { /* 새로 추가되는 이미지에 사용할 CSS */
position : relative;
top : -100px;
z-index : 10;
}
.css_test_stop {
margin-top : 10px;
text-align : center;
font-weight : bold;
display : none;
color : red;
font-size : 15pt !important;
}
</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>
<div class="css_test">
<div class="dogbox"><img src="//superkts.com/img/css/dog061.gif" /></div>
</div>
<div class="css_test_stop">그만 왔으면 좋겠다 ...</div>
<script type="text/javascript">
function j_test(src){
$('.css_test .dogbox')
.after('<img class="new" src="' + src + '" />');
$('.css_test .dogbox').next().animate({top:0}, 1000, 'easeOutBounce');
if($('.css_test img').size() > 10) $('.css_test_stop').show();
}
</script>