Jquery에서 상자에 애니메이션 적용

Question

Jquery에서 상자에 애니메이션을 적용하려고합니다. 기본적으로 나는 상자를 의 사각형 경로로 옮기려고합니다. 나는 그것을 오른쪽으로 이동시키고 그 아래로 움직일 수는 있지만 그 이후에는 아무 것도하지 않는다. 어떤 제안?

$(document).ready(function(){ 

    $('#box').css({'height':'100px','width':'100px','background-color':'black', 'position':'absolute','marginTop':'70px'}); 

    $('#box').animate({'left':'1000px'},3000,'swing', function(){ 
    $('#box'). animate({'top':'500px'},3000,'swing',function(){ 
    $('#box'). animate({'right':'1000px'},3000,'swing') 
    }) 
    }) 
}); 

Answer 1

작은 편집.

$(document).ready(function(){ 

    $('#box').css({'height':'100px','width':'100px','background-color':'black', 'position':'absolute','marginTop':'70px'}); 

    $('#box').animate({'left':'1000px'},3000,'swing', function(){ 
    $('#box').animate({'top':'500px'},3000,'swing',function(){ 
     $('#box').animate({'left':'0px'},3000,'swing'); 
    }); 
    }); 
}); 

Answer 2

사용 'left':'0px' 대신 'right':'1000px' .Try이 : 그것은 일 와우

$(document).ready(function(){ 
$('#box').css({'height':'100px','width':'100px','background-color':'black', 'position':'absolute','marginTop':'70px'}); 
$('#box').animate({'left':'1000px'},3000,'swing', function(){ 
$('#box').animate({'top':'500px'},3000,'swing',function(){ 
$('#box').animate({'left':'0px'},3000,'swing') 
})})}); 

Working Fiddle