要素座標を取得

Question

私はここでいくつかの助けが必要です。 https://jsfiddle.net/MiloSx7/a0dn9a4f/2/

アニメーションのアイデア：コインスケールを2倍にしてゆっくりと移動させ、硬貨を表示している画像の正確な位置まで縮尺を徐々に縮小します。 inventory stat is、invLocationは、アニメーションを終了すべき要素のIDです。それは現在のcoinId XとY から始まります。invLocationのXとYをどうにかして取得することができますので、どこにアニメーションを移動させるべきかを知ることができますか？

Answer 1

JQueryのposition（）メソッドとoffset（）メソッドでこれを行うことができます。

const spawnTime = 10000; 

var coin = 0; 
var intervalId = ''; 

var coinDiv = $('#coinDiv'); 
var coinImg = $('#coinImg'); 
var invDiv = $('#invDiv'); 
var invId = $('#inventoryId'); 
var invImg = $('#invLocation'); 


coinImg.on('click', collect); 
intervalId = setInterval(setLocation, spawnTime); 


function setLocation() { 
    var x = parseInt(Math.random()*(80-20+1)) + 20; 
    var y = parseInt(Math.random()*(80-20+1)) + 20; 

    coinImg.animate({ 
    opacity: 1 
    }, 3000, 
    function() { 
    coinImg.css('top', x+'%'); 
    coinImg.css('left', y+'%'); 
    coinImg.css('display', 'initial'); 

    setTimeout(() => coinImg.animate({ opacity: 0 }, 3000), 6000); 
    }); 
} 

function collect() { 
    clearInterval(intervalId); 

    coinImg.stop(); 
    coinImg.css('opacity', 1); 

    /* Increment coin counter */ 
    coin++; 
    invId.text(coin); 

    /* In order to disable multiple clicks */ 
    coinImg.css('pointer-events', 'none'); 

    /* Double the size */ 
    coinImg.css('width', '128px'); 
    coinImg.css('height', '128px'); 

    /* Animate and return to normal */ 
    coinImg.animate({ 
     width: '32px', 
     height: '32px', 
     left: invImg.offset().left + 'px', 
     top: invImg.offset().top + 'px' 
    }, 1500, 
    function() { 
     coinImg.css('pointer-events', 'auto'); 
     coinImg.css('display', 'none'); 
     coinImg.css('width', '64px'); 
     coinImg.css('height', '64px'); 

     intervalId = setInterval(setLocation, spawnTime); 
    } 
); 
} 

の作業例：https://jsfiddle.net/wz4q9w69/