<style type="text/css">
.css_test {
border-radius : 5px;
border : 5px solid gray;
padding : 7px;
}
.css_test img {
position : relative;
}
</style>
이전 예제는 버튼을 연타해도 마지막 이미지가 사라지기 전까지 다른 이미지는 움직이지 않습니다.<br>
버튼을 누르면 움직이는 이미지는
.last() 에 해당하고 다시 버튼을 누르더라도<br>
그 움직이고 있는 이미지에 효과가 적용되므로 사라지기 전까지 다른 이미지는 반응하지 않게되죠.<br>
그럼 이번엔 버튼을 누를때 마다 반응하게 해볼까요. ㅎㅎ<br><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" /><br>
<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" />
<img src="//superkts.com/img/huk1.gif" /><br>
<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:not(:animated)' )
.last()
.attr( 'src', '//superkts.com/img/huk2.gif')
.animate( {left:'+=150', 'opacity':0 }, 500, function(){
$(this).remove();
} );
}
</script>