<style type="text/css">
.css_test {
position : relative;
text-align : right;
}
.css_test img {
position : relative;
}
</style>
<button type="button"
onclick="j_test()">눌러보세요~ 달려라 달팽이 !!</button><br>
그리고 달팽이가 어느정도 움직이면 아래 버튼을 눌러보세요.<br><br>
<button type="button"
onclick="$('.css_test img')
.stop()">
;stop()</button>
<button type="button"
onclick="$('.css_test img').finish()">finish()</button>
<div class="css_test">
<img src="//superkts.com/img/css/dalpeng04.gif" />
</div>
<script type="text/javascript">
function j_test(){
$('.css_test img').css({left : 0});
var pos = $('.css_test img').position();
$('.css_test img')
.stop().animate({left : pos.left * -1}, 10000)
}
</script>
- stop 이 적용된 상태에서 finish 를 적용해도 아무 의미 없습니다.
- 애니메이션 효과에 skip 기능을 사용한다면 finish 메서드를 사용하면 좋겠죠.
- 그리고 애니메이션 중복실행 방지는 stop 메서드 !