jQuery animate : 요소가 이동되지 않도록하려면 어떻게해야합니까?

Question

여기

내가 달성하기 위해 노력하고있어 작은 예입니다

Example

var elemOrigPos;  

$('div.box').hover(
function() { 
    var $this = $(this); 
    elemOrigPos = $this.position(); 
    var offset = 50; 

    $this.stop(true, true).animate({ 
     'width': '200px', 
     'height': '200px', 
     'top': (elemOrigPos.top - offset) + 'px', 
     'left': (elemOrigPos.left - offset) + 'px' 
    }, 150); 
}, 
function() { 
    $(this).stop(true, true).animate({ 
     'width': '100px', 
     'height': '100px', 
     'top': (elemOrigPos.top) + 'px', 
     'left': (elemOrigPos.left) + 'px' 
    }, 150); 
} 
); 

당신이 즉시 요소 천천히 가져하지만 경우에 당신이 그들을 더 빨리 가져가 그것은 잘 작동, 그들은 원래 위치를 잃는다. 나는 그것이 애니메이션이 완성되기 전에 position()을 사용하지만 그것을위한 솔루션을 찾을 수 없다는 것과 관련이 있다고 생각한다.

미리 알려 주셔서 감사합니다. :)

Answer 1

코드에서 보았을 때 주된 문제는 마우스 오버시 요소의 현재 위치로 origPosition을 항상 재설정한다는 것입니다 (애니메이션 중간 일 수 있으므로 올바른 위치가 아닐 수도 있습니다). 이 솔루션은 다소 간단합니다. 원래 위치를 실제 위치와 별도로 저장하면됩니다.

내가 한 것은 단순히 jQuery.data()의 원래 위치를 저장하여 모든 계산을 실제 위치가 아닌 실제 위치에서 수행 할 수 있도록하기 위해서였습니다.

$('div.box') 
     .each(function() { 
      $(this).data('position', $(this).position()); 
     }) 
     .hover(
     function() { 
      var $this = $(this); 
      elemOrigPos = $(this).data('position'); 
      var offset = 50; 
    .... 

는 바이올린을 업데이트 :