获取元素坐标

Question

我需要一些帮助。首先，下面是我的游戏中的一个小演示代码：https://jsfiddle.net/MiloSx7/a0dn9a4f/2/

动画思想:将硬币比例尺采集到2倍，然后慢慢移动，然后逐渐缩小到显示硬币库存数据的图像的确切位置，invLocation是动画应该结束的元素的ID。它从当前的coinId X和Y开始，它是否可能以某种方式得到invLocation的X和Y，以便我知道应该在哪里让动画移动？

Answer 1

您可以使用JQuery 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/