Javascript 随机点击div在网页上移动

我有一段javascript代码，可以使div在网页上随机移动，但我不知道如何使它不连续流动，这就像用户单击然后移动，然后停在那里，每当再次单击时，它会移动到另一个随机位置，5次后，它会显示一条消息并消失。我不知道如何使这个动画不像一个流，而是像一片树叶从树上落下

以下是JSFIDLE：

下面是javascript代码：

$(document).ready(function(){
animateDiv();

});

function makeNewPosition(){

   // Get viewport dimensions (remove the dimension of the div)
   var h = $(window).height() - 50;
   var w = $(window).width() - 50;

   var nh = Math.floor(Math.random() * h);
   var nw = Math.floor(Math.random() * w);

   return [nh,nw];    

   }

  function animateDiv(){
  var newq = makeNewPosition();
  var oldq = $('.a').offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);

   $('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
    animateDiv();        
    });

   };

  function calcSpeed(prev, next) {

   var x = Math.abs(prev[1] - next[1]);
   var y = Math.abs(prev[0] - next[0]);

   var greatest = x > y ? x : y;

   var speedModifier = 0.1;

   var speed = Math.ceil(greatest/speedModifier);

   return speed;

   }

---

animateDiv函数在末尾调用自己，因此一旦到达目的地，它就会选择一个新的目的地并到达目的地。下面是已删除递归回调的示例：

function animateDiv(){
  var newq = makeNewPosition();
  var oldq = $('.a').offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);

  $('.a').animate({ top: newq[0], left: newq[1] }, speed);
};

还有一个更新的提琴，现在需要点击框来设置动画：

类似于？

var isStart=true；
$（“.a”）。单击（函数（）{
animateDiv（isStart）；
});
函数makeNewPosition（）{
//获取视口尺寸（删除div的尺寸）
var h=$（窗口）.height（）-50；
var w=$（窗口）.width（）-50；
var nh=数学地板（数学随机（）*h）；
var nw=Math.floor（Math.random（）*w）；
返回[nh，nw]；
}
函数animateDiv（）{
var newq=makeNewPosition（）；
var oldq=$（'.a'）.offset（）；
var速度=计算速度（[oldq.top，oldq.left]，newq）；
如果（isStart）{
$（'.a'）。设置动画({
top:newq[0]，
左：newq[1]
}，速度，功能（）{
animateDiv（）；
});
isStart=false；
}否则{
$（'.a'）.stop（）；
isStart=true；
}
};
函数calcSpeed（上一个，下一个）{
var x=Math.abs（prev[1]-next[1]）；
var y=Math.abs（上一个[0]-下一个[0]）；
var最大=x>y？x:y；
var speedModifier=0.1；
var speed=Math.ceil（最大/速度修改器）；
返回速度；
}

a分部{
宽度：50px；
高度：50px；
背景色：红色；
位置：固定；
}

---

我会使用

CSS3转换，它们会加速硬件，这意味着更平滑的动画：


$（文档）.ready（函数（）{
var计数器=0；
$（'.a'）。单击（函数（）{
如果（++计数器<5）{
var pos=makeNewPosition（）；
this.style.left=pos[1]+'px'；
this.style.top=pos[0]+'px'；
}
否则如果（计数器=5）{
this.style.display='none'；
警报（“您的消息”）；
}
});
});
函数makeNewPosition（）{
//获取视口尺寸（删除div的尺寸）
var h=$（窗口）.height（）-50；
var w=$（窗口）.width（）-50；
var nh=数学地板（数学随机（）*h）；
var nw=Math.floor（Math.random（）*w）；
返回[nh，nw]；
}
a分部{
宽度：50px；
高度：50px；
背景色：红色；
位置：固定；
左：0px；
顶部：0px；
-webkit转换：左2秒，前2秒；
-moz转换：左2s，上2s；
-o型过渡：左2s，上2s；
过渡：左2s，上2s；
}
更好：使用CSS translate移动元素。顶部和左侧定位不提供亚像素渲染的可能性。