<style type="text/css">
.css_test {
height : 220px;
text-align : center;
}
.css_test img {
position : relative;
z-index : 10;
}
</style>
<div class="css_test">
<img src="//superkts.com/img/css/bird17.gif" />
<img src="//superkts.com/img/css/bird17.gif" />
<img src="//superkts.com/img/css/bird17.gif" />
<img src="//superkts.com/img/css/bird17.gif" />
</div>
<button type="button"
onclick="j_test_fly_up()">다음 닭 !</button>
<script type="text/javascript">
function j_test(){
if($('.css_test img').size() == 0){
$('.css_test').html('이제 없 닭 !!<br><img src="//superkts.com/img/css/cat.gif">');
return;
}
$('.css_test img:eq(0)').stop().animate({top:'-=100'}, 1000, function(){
$('.css_test img:eq(0)').stop().animate({top:'+=100'}, 500, j_test);
});
}
j_test();
function j_test_fly_up(){
$( '.css_test img:animated' ).stop().animate( { top:'-=400', opacity:0 }, function(){
$(this).remove();
j_test();
});
}
</script>