jQuery 動畫：如何避免元素被置換？

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/