<style type="text/css">
.css_test {
border : 5px solid silver;
margin-top : 100px;
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 : -150px;
z-index : 10;
}
</style>
어느 네모칸 안에 개가 살고 있었어요. 그런데 ...<br><br>
<button type="button"
onclick="j_test_before()">before</button>
<button type="button"
onclick="j_test_prepend()">prepend</button>
<button type="button"
onclick="j_test_append()">append</button>
<button type="button"
onclick="j_test_after()">after</button>
<button type="button"
onclick="j_test_remove()">다 사라졌으면 좋겠다 !!</button>
<br>
<div class="css_test">
<div class="dogbox"><img name="IDDQD" src="//superkts.com/img/css/dog061.gif" /></div>
</div>
<script type="text/javascript">
function j_test_get_img(){
var img = [
'//superkts.com/img/css/huk.gif',
'//superkts.com/img/css/dog021.gif',
'//superkts.com/img/css/dog060.gif',
'//superkts.com/img/css/dog061.gif',
'//superkts.com/img/css/bird20.gif',
'//superkts.com/img/css/bird21.gif',
'//superkts.com/img/css/bird27.gif',
'//superkts.com/img/css/bird28.gif',
'//superkts.com/img/css/bird34.gif'
];
var rnd = Math.floor(Math.random() * img.length);
return img[rnd];
}
function j_test_before(){
$('.css_test .dogbox').before('<img class="new" src="' + j_test_get_img() + '" />');
$('.css_test .dogbox').prev().animate({top:0}, 1000, 'easeOutBounce');
}
function j_test_after(){
$('.css_test .dogbox').after('<img class="new" src="' + j_test_get_img() + '" />');
$('.css_test .dogbox').next().animate({top:0}, 1000, 'easeOutBounce');
}
function j_test_append(){
$('.css_test .dogbox').append('<img class="new" src="' + j_test_get_img() + '" />');
$('.css_test .dogbox img:last').animate({top:0}, 1000, 'easeOutBounce');
}
function j_test_prepend(){
$('.css_test .dogbox').prepend('<img class="new" src="' + j_test_get_img() + '" />');
$('.css_test .dogbox img:first').animate({top:0}, 1000, 'easeOutBounce');
}
function j_test_remove(){
$('.css_test img:not([name=IDDQD])').animate({top:'-=300', opacity:0}, 1000, function(){
$(this).remove();
});
}
</script>