Javascript Can'；使用jquery将div top属性动画设置为0px

我试图通过将css top值设置为0px并将其css属性从relative更改为fixed（它覆盖了位于其上方的另一个div），将div设置为窗口顶部的动画。属性会发生变化，但它不会动画到顶部，它只会在一帧中移动。我真的很想轻松爬到山顶，而不是跳跃

这是一把小提琴

代码如下

HTML

#菜单{
位置：相对；背景色：黑色；颜色：白色；
文本对齐：居中；宽度：100%；z索引：9
}
#空格{高度：20px；位置：相对；z索引：5}
废话
变量菜单=$（“#菜单”）；
css（'position'，'fixed'）。延迟（400）；
动画（{top:'0px'}，1000）；

这两行被注释掉后，效果很好

我将1000改为2000，你可以清楚地看到它的动画效果

var menu = $("#menu");
menu.css('position','fixed').delay(400);
//menu.css('top', '0px');
//menu.css('position', 'fixed');

menu.animate({top: '0px'},2000);

---

在

#menu

和

#space

中添加了一个父元素，并将

#menu

设置为

位置：绝对值

问题是，在将位置更改为固定值之前，元素没有设置“顶部”值。它被设置为自动。可以先将其设置为“偏移”值，然后将位置更改为“固定”，然后设置动画，如下所示：

---

基本上，您无法将其从“自动”设置为“0”。

我在您的小提琴中看不到任何动画。。铬-32.0.1700.72m@MElliott我刚刚在css中添加了top 500px以更清晰地显示它。但是，是的，它确实像firefox中的动画一样

var menu = $("#menu");
menu.css('position','fixed').delay(400);
//menu.css('top', '0px');
//menu.css('position', 'fixed');

menu.animate({top: '0px'},2000);

var menu = $("#menu");
menu.css({'top': menu.offset().top, 'position': 'fixed'})
    .delay(400).animate({top: '0'},1000);