jQuery 判断动画边界

Posted 2020-12-06 freedomweb

在一个父盒子中，给子盒子设置左移动画，判断子盒子在位移时，是否超出了父盒子的边界

我一开始是这样做的：

定义一个变量，设置固定位移值 20，假设父盒子大小 600px，位移 500px 就能紧紧贴近父盒子的最右侧，不会越界。
但是如果把位移值设置为 21 的时候，这时候就会超出父盒子最右侧，因为之前的 20 它累加总能加到 500，现在21这个数值，它最后生成的位移值会让子盒子越过父盒子边界。

为了解决上面的问题，我加了判断条件，在位移时，先判断每次的位移值 是否大于等于父盒子减去子盒子的大小，后来发现这么搞不行，因为每次子盒子的位移值是运行完动画后才计算生成的。

最后解决办法是：
先获取到子元素的left值，设置一个变量累加这个left值，在运行动画之前，判断这个left值是否大于等于父盒子减去子盒子的大小，如果进入判断条件，就强制把子盒子的动画值调整到父盒子减去子盒子大小的这个位置。