<style type="text/css">
.css_test {
text-align : left;
height : 150px;
}
.css_test img {
position : relative;
width : 200px;
margin-top : 20px;
}
</style>
움직여랏 버튼을 눌러보세요.<br>
처음 한번은 애니메이션을 끝까지 봐주세요.<br>
다시 움직여랏 버튼을 먼저 누르고 멈추기 버튼을 눌러보세요.<br>
<br>
<button type="button"
onclick="j_test()">움직여랏!</button>
<button type="button"
onclick="$('.css_test img').clearQueue().stop()">완벽히 멈추기</button><br>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" />
</div>
<br><br><br>
<script type="text/javascript">
function j_test(){
var q = $( '.css_test img' ).queue('fx');
if(q.length > 0) return;
$( '.css_test img' )
.css({ top : 0, left : 0 })
.attr( 'src', '//superkts.com/img/huk1.gif' )
.animate({ left : '+=200' }, 1500)
.queue(function(){
$(this).attr( 'src', '//superkts.com/img/huk2.gif' ).dequeue();
})
.delay(1000)
.queue(function(){
$(this).attr( 'src', '//superkts.com/img/huk1.gif' ).dequeue();
})
.animate({ left : '+=200' }, 1500)
}
</script>