<style type="text/css">
.css_test {
border-radius : 5px;
border : 5px solid gray;
padding : 7px;
}
.css_test img {
position : relative;
}
</style>
맨 뒤의 사람부터 내보내기<br>
<button type="button"
onclick="j_test()">나가세요</button>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
<img src="//superkts.com/img/huk1.gif" />
</div>
<script type="text/javascript">
function j_test(){
$( '.css_test img:last' ).animate( {left:'+=150', 'opacity':0 }, 500, function(){
$(this).remove();
} );
}
</script>
$( '.css_test img:last' ).animate( { left : '+=150', 'opacity' : 0 }, 500, function(){
$(this).remove();
} );
해당 셀렉터의 마지막 이미지를 찾아서 오른쪽으로 150px 이동시킴과 동시에 투명해 지도록 만들고
애니메이션이 끝나면 해당 이미지를 삭제합니다.
관련 메서드 : .animate(), .remove()