2

这是我想要实现的一个小例子：

例子

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() 但无法找到解决方案有关。

提前感谢您提供解决此行为的任何提示或提示。:)

4

1 回答 1

2

我查看了您的代码，主要问题是您总是在悬停时将 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/

于 2012-11-14T10:17:33.707 回答