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; 
    .... 

更新小提琴：http://jsfiddle.net/FXFUB/1/