Question

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

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/

jQuery animate：如何避免元素被取代？

1 个答案: