跨页面跟踪随机 div答案

【问题标题】：Tracking random div across page跨页面跟踪随机 div
【发布时间】：2017-02-14 06:55:35
【问题描述】：

试图在页面周围随机移动我的 div。目前新随机生成的 div 出现在页面上的新位置，而不是转换到新位置（我希望 div 跨页面跟踪，而不是删除自身并重新出现）。

function randomdiv1 () {
  var divnum = $('.random').length;
  var random = $('.random');
  var startleft =random.css('left', (Math.floor(Math.random() * ($(window).width()-50))));
  var starttop =random.css('top', (Math.floor(Math.random() * ($(window).height()-50))));
  return [startleft, starttop];
}

function randomdiv2 () {
  var divnum = $('.random').length;
  var random = $('.random');
  var endleft =random.css('left', (Math.floor(Math.random() * ($(window).width()-50))));
  var endtop =random.css('top', (Math.floor(Math.random() * ($(window).height()-50))));
  return [endleft, endtop];
}

function randomdiv3 () {
  var startdiv = randomdiv1 ();
  var enddiv = randomdiv2 ();
  $('.random').animate({
    top: enddiv[1],
    left: enddiv[0],
    }, 2000, 'swing', randomdiv3);
 }

 randomdiv3 ();

.random {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="random"></div>
</body>
</html>

【问题讨论】：

css() 函数在使用两个参数调用时，会返回您调用该函数的 jQuery 对象。因此，randomdiv3 top: enddiv[1] 将 top 设置为 jQuery 对象，这并没有真正的帮助。

标签： javascript jquery html random

【解决方案1】：

这可以通过将以下css属性添加到.random以简单的方式实现：

transition: left 2s, top 2s;

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

下面的例子：

https://jsfiddle.net/4r9xch2v/

【讨论】：