Javascript 在父对象中设置子对象的动画

我正在尝试使用TweenMax在父div中设置子div的动画。动画应该从父div中的一个随机位置开始（它工作得很好）。但是动画应该不能超出父div。如何使子div从随机开始位置进行动画，但不能超出父div

这是迄今为止我的js：

var main = $('.outer');
var box = $('.inner');

var width = main.width();
var height = main.height();

$( '.inner' ).each(function( index ) {
  $(this).css({
    left : Math.random() * ($('.inner').width() - $(this).width()),
    top : Math.random() * ($('.inner').height() - $(this).height())
  });
});

function randomNumber(min, max) {
  return (Math.random() * (max - min)) + min;
}

TweenLite.defaultEase = Linear.easeNone;
var tl = new TimelineLite()

tl.to(".inner", 3.05, {x:randomNumber(0, width), repeat:-1, yoyo:true})
  .to(".inner", 3.4, {y:randomNumber(0, height), repeat:-1, yoyo:true}, 0)

---

您也可以单击

在此处创建一个代码段使用

左：随机数（0，width-box.width（））

和

顶部

，而不是

y

，减去高度。您在设置功能中的设置是正确的。。。Console.log

$（'.inner'）.width（）-$（this.width（）

。。。我敢肯定结果是零。@ChrisG非常感谢你！现在还不习惯用TweenLite动画。我对x位置和左边位置有点困惑。@jdo Louys是对的，实际上你在设置中弄错了。您需要

Math.random*（main.width（）-box.width（））

，对于

height（）

也需要相同的设置。（但这在你的小提琴中是正确的…！）