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 に答える