Question

我试图通过将css顶部值设置为0px并将其css属性从相对位置更改为固定（它覆盖在其上方的另一个div）来获取一个div来设置窗口顶部的动画效果。属性发生了变化，但它没有动画到顶部它只是在一帧中。我真的很想放松到顶部而不是跳。

以下是http://jsfiddle.net/sedickinson/d4c9u/

的小提琴

以下代码

HTML

<html>
    <head>
        <style>
            #menu{
                position: relative ; background-color: black; color: white; 
                text-align: center; width:100%; z-index: 9
            }
            #space{height:20px; position: relative; z-index: 5}
        </style>
    </head>
    <body>
        <div id="space"> </div>
        <div id="menu">blah</div>
        <script>
            var menu = $("#menu");
            menu.css('position','fixed').delay(400);
            menu.animate({top: '0px'},1000);
        </script>
    </body>
</html>

Answer 1

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

http://jsfiddle.net/d4c9u/5/

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

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

Answer 2

http://jsfiddle.net/d4c9u/1/

将这两行注释掉，它运行正常。

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

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

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

Answer 3

http://jsfiddle.net/_mtr/LRa9Q/

为#menu和#space添加了父级，并将#menu设置为position: absolute。

无法使用jquery将div top属性设置为0px

3 个答案: