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/