Javascript 设置从div中间到屏幕右下角的div动画到固定位置 我想弄清楚的是如何激活一个div，它将在页面中间的div中间启动。div最初应该不具有位置：绝对。除非这是不可能的，否则我希望它不要从这开始，因为它似乎很难有任何数据低于它。它不会是那么大的盒子。我猜高度在100px和600px之间，宽度在400px和800px之间

我最初发现它做得很好，几乎正是我所需要的。但是div以绝对位置开始，并且它已经位于要设置动画的页面的右下角

一旦div位于页面的右下角，它就需要固定在那里，这样我就可以在不移动页面的情况下上下滚动页面。在这一点上，我并不担心能把它推回到原来的位置

我尝试了几件事：将其排列在我想要的位置，然后单击按钮，添加一个属性为

position:absolute

的类，并调用如下动画函数：

chatWindow.stop().animate({
         bottom: 0
       , right: 0
    }, 2000);

但我的猜测是，它最初需要设置为

top:0中的位置；左：0

，这就是它无法工作的原因

我已经让它在没有任何动画的情况下工作了，我希望能够弄清楚如何制作这个东西的动画。在没有动画的情况下，只需将具有法线位置属性的类与具有

position:fixed；底部：0；右：0

---

这里是一个我创建的，以显示我真正需要的，而不是正确的动画部分不在那里。任何帮助都会很棒，因为我已经玩了很长时间了。

如果你想要从左到右的动画，你必须使用

左

和

顶

值。但缺点是，这将导致奇怪的动画，因为您希望在开始时保持框的相对位置。 所以当你做动画时，它会从窗口的左上角开始，这是不好的

为了避免这种情况，您必须在开始状态中使用

绝对

位置。你在问题中说你不想要它，但我认为它是获得想要的视觉效果所必需的。

然而，为了保持一个非常好的动画，但我知道它不是您想要的，您可以使用

右

和

下

值。它将使框显示在窗口的右下角

---

根据codepen示例中的情况，仍然使用绝对定位的一种可能性是通过添加以下CSS来伪造当前定位：

.container {
  padding-top: 250px;
}
.center-window {
  position: absolute;
  right: 50%;
  margin-right: -200px; /* i.e. half of its width */
  bottom: 100%;
  margin-bottom: -250px; /* i.e. its height */
}

然后可以相应地设置右侧、底部和边距属性的动画。请参阅（尽管它目前不使用填充）。当然，如果您不确定.center窗口的尺寸，则此解决方案可能无法正常工作