Javascript 获取元素坐标

我需要一些帮助。 首先，这里是我游戏中的一个小演示代码：

动画创意：收集硬币后，将硬币缩放到2倍，然后缓慢移动，并逐渐缩小到显示硬币库存统计的图像所在的准确位置，invLocation是动画应该结束的元素的ID。它从当前的coinId X和Y开始

---

是否有可能以某种方式获取invLocation的X和Y，以便我知道应该告诉动画移动到哪里？

您可以使用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);
    }
  );
}

---

工作示例：

您好，谢谢您的回复，我玩这个游戏的最初目标是学习JS，我从来没有看过jQ，我也不太了解它。但是，我可以使用elem.getBoundingClientRect；，使用JS来实现这一点，它的工作原理与您的示例完全相同。祝你今天愉快