如何在边界内为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

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

• 像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>