javascript - jQuery 动画 : How to avoid elements being displaced?

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

更新了 fiddle :http://jsfiddle.net/FXFUB/1/