javascript - 如何为边界内的 div 制作动画

Question

作为前言，这是我第一次使用 JQuery，所以我不太了解语法，而且我是 javascript 的初学者，而且我也是 stackoverflow 的新手。所以提前道歉。

如果之前有人问过这个问题，也提前致歉。这应该很简单，但不知何故我无法弄清楚，而且搜索起来有点困难。

问题:我需要我的动画在它所在的 div 边界内移动。

我尝试将 var h 和 var w 中的窗口更改为我的容器的 id，但不起作用:

var h = $(#ghosts).height() - 75;
var w = $(#ghosts).height() - 75;



// html
<div id="playBoxProperties">
            <div id="playBox"> // play area
              <div id="ghosts"> // container for all 8 ghosts

                <div id='g1' class="boo"> // one of the moving ghosts
                </div>

              </div>
            </div>
        </div>


// to randomize the movement

function randomPos() { 

  var h = $(window).height() - 75; // i need to change the window, to something else.
  var w = $(window).width() - 75; //  But i dont know what.

  var newH = Math.floor(Math.random() * h);
  var newW = Math.floor(Math.random() * w);

  return [newH, newW];

}

// animation to move around

function animateDiv(divID) {

  var newPos = randomPos();

  $(divID).animate({ top: newPos[0], left: newPos[1] }, 4000, function () {
    animateDiv(divID);
  });

我希望它在黑匣子内

Answer 1

从相对于父包装器的随机坐标中减去当前迭代的幽灵元素大小:

• 传递父级和动画子级，例如randomPos($chi, $par)
• 使用字符串作为选择器。 $(#ghosts); 应该是 $('#ghosts');
• 如果需要，请创建一个小型 jQuery 插件:$.fn.animateGhosts。像 $ghosts.animateGhosts();
一样使用它

const rand = (min, max) => Math.random() * (max - min) + min;
const $ghostsWrapper = $('#ghosts');
const randomPos = ($chi, $par) => ({ // Randomize position
  x: ~~(Math.random() * ($par.width() - $chi.width())),
  y: ~~(Math.random() * ($par.height() - $chi.height()))
});

$.fn.animateGhosts = function() {
  function anim() {
    const pos = randomPos($(this), $ghostsWrapper);
    $(this).stop().delay(rand(100, 500)).animate({
      left: pos.x,
      top: pos.y,
    }, rand(1000, 4000), anim.bind(this));
  }
  return this.each(anim);
};

$('.boo').animateGhosts();

#ghosts {
  position: relative;
  height: 180px;
  outline: 2px solid #000;
}

.boo {
  position: absolute;
  background: fuchsia;
  width: 50px;
  height: 50px;
}

<div id="ghosts">
  <div class="boo">1</div>
  <div class="boo">2</div>
  <div class="boo">3</div>
  <div class="boo">4</div>
  <div class="boo">5</div>
  <div class="boo">6</div>
</div>

<script src="//code.jquery.com/jquery-3.4.1.js"></script>

使用 CSS transition 和 translate 获得更好的性能

下面是一个示例，它将利用 CSS3 的强大功能以硬件 (GPU) 加速的方式移动我们的元素。请注意，当减速时，元素不会曲折至圆形像素值(因为 jQuery 对 top 和 left 进行动画处理)。
相反，我们将使用 transition 来实现 CSS3 动画计时，并使用 translate(x, y) 来实现位置:

const rand = (min, max) => Math.random() * (max - min) + min;
const $ghostsWrapper = $('#ghosts');
const randomPos = ($chi, $par) => ({ // Randomize position
  x: ~~(Math.random() * ($par.width() - $chi.width())),
  y: ~~(Math.random() * ($par.height() - $chi.height()))
});

$.fn.animateGhosts = function() {
  function anim() {
    const pos = randomPos($(this), $ghostsWrapper);
    $(this).css({
      transition: `${rand(1, 4)}s ${rand(0.1, 0.4)}s ease`, // Speed(s) Pause(s)
      transform: `translate(${pos.x}px, ${pos.y}px)`
    }).one('transitionend', anim.bind(this));
  }
  return this.each(anim);
};

$('.boo').animateGhosts();

#ghosts {
  position: relative;
  height: 180px;
  outline: 2px solid #000;
}

.boo {
  position: absolute;
  background: fuchsia;
  width: 50px;
  height: 50px;
}

<div id="ghosts">
  <div class="boo">1</div>
  <div class="boo">2</div>
  <div class="boo">3</div>
  <div class="boo">4</div>
  <div class="boo">5</div>
  <div class="boo">6</div>
</div>

<script src="//code.jquery.com/jquery-3.4.1.js"></script>