javascript - 计算两个运动元素之间的距离

我正在尝试计算两个移动HTML元素之间的距离。
现在，我将其移至:hover上。
但是移动时结果不会改变。

怎么了

这是我的代码：

var lFirst = $("#x").offset().left;
var lSecond = $("#y").offset().left;
var ldist = parseInt(lFirst - lSecond);

var tFirst = $("#x").offset().top;
var tSecond = $("#y").offset().top;
var tdist = parseInt(tFirst - tSecond);

$('#result').append(parseInt(tdist + ldist));

html, body{
  margin:0;
  padding:0;
}
*{
  transition:all 1s;
}
#x, #y{
  width:50px;
  height:50px;
  margin-left:0;
  margin-top:0;
  background:black;
}
#container{
  height:100vh;
  width:100vw;
  background:lightgrey;
}
#container:hover #x{
  margin-left:50vw;
}
#container:hover #y{
  margin-top:50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="result"></div>
  <div id="x"></div>
  <div id="y"></div>
</div>

View on JSFiddle

最佳答案

结果仅设置一次。您需要在对象移动时对其进行更新。
一种解决方案是使用JavaScript的setInterval()更新计时器上的值。
在下面的示例中，我每100毫秒更新一次结果。

var $x=$('#x');
var $y=$('#y');
var $result=$('#result');

function updateDistance() {

  var lFirst = $x.offset().left;
  var lSecond = $y.offset().left;
  var ldist = parseInt(lFirst - lSecond);

  var tFirst = $x.offset().top;
  var tSecond = $y.offset().top;
  var tdist = parseInt(tFirst - tSecond);

 $result.text(parseInt(tdist + ldist));

}

setInterval(updateDistance, 100);

html,
body {
  margin: 0;
  padding: 0;
}

* {
  transition: all 1s;
}

#x,
#y {
  width: 50px;
  height: 50px;
  margin-left: 0;
  margin-top: 0;
  background: black;
}

#container {
  height: 100vh;
  width: 100vw;
  background: lightgrey;
}

#container:hover #x {
  margin-left: 50vw;
}

#container:hover #y {
  margin-top: 50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="result"></div>
  <div id="x"></div>
  <div id="y"></div>
</div>