Question

我有这个代码可以正常工作。它随机移动容器内的元素。问题是我无法控制元素的速度;我已经尝试了几种解决方案（比如动画方法的正常持续时间），但它们都没有奏效。任何帮助都会被贬低。代码：

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

function makeNewPosition() {
  var h = $('.main-translucid').height() - 50;
  var w = $('.main-translucid').width() - 50;

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

  return [nh, nw];
}

function animateDiv() {
  var newq = makeNewPosition();
  $('.fly').animate({
    top: newq[0],
    left: newq[1],
    right: newq[0],
    bottom: newq[0]
  }, function() {
    animateDiv();
  });
};

小提琴：https://jsfiddle.net/hjtkesaj/

Answer 1

.animate在属性后的毫秒内接受可选的duration参数。每次迭代使飞行需要5秒的例子：

function animateDiv() {
  var newq = makeNewPosition();
  $('.fly').animate({
    top: newq[0],
    left: newq[1],
    right: newq[0],
    bottom: newq[0]
  }, 5000, function() {
    animateDiv();
  });
};

（Fiddle）

为每次迭代随机化这个值可能是创造一种类似飞行混乱运动的廉价幻觉的好方法。

jQuery：控制随机移动的元素的速度

1 个答案: