.animate() 원래 상태로 돌아 가기

Question

저는 jQuery에 익숙하지 않으며 그것을 배우려고합니다. 부모를 클릭 한 후에 요소에 애니메이션을 적용하고 있지만 요소를 설정된 기간 후에 원래 상태로 되돌리기를 원합니다. 내가 시도 했어 setTimeout하지만 내가 잘못 사용하고있을 수 있으므로 작동하지 않았다. 누군가 이렇게하는 방법을 설명 할 수 있습니까?

var span = $('span'); 

$('button').click(function(){ 


    span.animate({ 

     left: '200' }, 500, 'linear', function() { 

     }); 
    }); 

Answer 1

이렇게 할 수 있습니다. 여기

var span = $('span'); 
// insert span into your document somehow 
// set absolute positioning on it 
$('button').click(function(){ 
    var origLeft = span.css("left"); 
    span.animate({left: '200' }, 500, 'linear').delay(2000).animate({left: origLeft}, 500, 'linear'); 
}); 

근무 데모 : http://jsfiddle.net/jfriend00/zB5NL/

당신은 그들 사이의 시간 지연 여러 애니메이션을 왼쪽의 원래 값을 저장하고 체인에 delay() 방법을 사용

Answer 2

그것은 당신이 무엇을 의미하는지 완벽하게 명확하지 않다하지만 당신은 콜백에서 "뒤로"애니메이션을 다음 CSS 속성의 초기 값을 저장 할 수있다. 그리고 애니메이션을 적용하려면 DOM에 스팬을 추가해야합니다. 다음과 같음 :

var span = $('span'); 
$('body').append(span); 
$('button').click(function() { 
    var left = span.css('left'); 
    span.animate({ 
     left: '200' 
    }, 500, 'linear', function() { 
     //animate back to starting position 
     span.animate({ 
     left: left 
    }, 500, 'linear'); 
    }); 
});