드래그 가능한 요소를 맨 아래쪽에 애니메이션 적용

Question

드래그 한 후 한 번의 부드러운 이동으로 시작 위치 (아래/왼쪽)로 오브젝트를 다시 애니메이트하고자합니다. 모든 것이 정상/왼쪽 시작 위치에서 잘 작동하는 것처럼 보입니다. 내가 이해하는 한, 애니메이션 기능은 맨 위 값이 설정되어 있지 않은 한 이동을 계산할 수 없기 때문입니다.

나는 예를 들어 만든 :

이

$("#move").click(function(){ 
    $(".block").animate({"bottom": "9px", "left": "9px"}, "slow"); 
}); 

http://jsfiddle.net/Tancrede/dztFw/3/

그것은 너무 복잡하지 않아야을하지만 내 자바 스크립트/JQuery와 능력은 매우 제한되어 있음을 두려워 해요.

비슷한 질문이 제기되었으며 내 상황이 더 간단하다는 인상을 받았지만 여전히 스크립트를 적용하는 방법을 모릅니다. Animating draggable object to its starting position

누군가 나를 도와 줄 수 있다면 좋을 것입니다.

Answer 1

나는 드래그은 요소에 top 설정되어 있기 때문에, 나는이 순간에 다른 방법을 생각할 수 없다 조금 해키하지만 보일 수도 있습니다에 대한 해결책으로 올라와있다, 당신은 할 수 요소에 고정 된 높이가없는 한 꼭대기가있을 때 바닥에 있습니다. 당신의 경우에 그렇습니다. 내 예에서

$("#draggable").draggable({ containment: "window" }); 

$("#move").click(function(){ 
    var el = $('.block'); // Save the element 
    el.animate({ 
     top: getHeight(el, 9), // Calculate the height with our function 
     left: "9px" 
    }, "slow"); 
}); 

var getHeight = function(elem, extra) { 
    return $(window).height() - elem.height() - (extra || 0); 
    // here we just calculate the height of the window minus the height of 
    // the element minus the extra 9px that you had by default, and we get a 
    // bottom:9px; effect. 
}; 

우리가 bottom을 생략하고 대신 top를 사용합니다, 우리는 윈도우의 height을 계산 한 다음 element의 height하고 필요한 여분을 빼앗아. 나는 더 나은 방법을 생각할 수있는 경우

Demo

, 나는 대답에 추가합니다.

주 -이 이미 top가 있고 그래서 그냥 bottom

로 바로 이동합니다 auto 또는 inherit에 top 애니메이션을 할 수 있기 때문에 당신의 방법을 작동하지 않습니다 이유는