javascript - 无法使用 jquery 将 div 顶部属性设置为 0px

标签 javascript jquery css

我试图通过将 css top 值设置为 0px 并将它的 css 属性从 relative 更改为 fixed(它覆盖了它上面的另一个 div)来让一个 div 动画到窗口的顶部。属性发生变化,但它不会动画化到顶部,它只是在一帧中出现。我真的很想轻松到达顶部而不是跳跃。

这是一个 fiddle 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>

最佳答案

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

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

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

基本上,您不能将它从“自动”设置为“0”。

关于javascript - 无法使用 jquery 将 div 顶部属性设置为 0px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21070540/

相关文章:

html - 使元素延伸到整个屏幕

javascript - 有没有办法在 google chrome 扩展程序中增加变量而无需打开扩展程序?

JavaScript Html 按钮

javascript - 可以隐藏延伸到图表之外的 Chart.js 网格线吗?

asp.net - Jquery自动完成加载问题

javascript - split() 不适用于仅 1 个值

css - 模糊其背后内容的蒙版

javascript - 使用 JavaScript 在选择字段中使用 optgroup 设置 html 选项值

javascript - 如何在 MySQL 数据库中保存 jquery keyup() 的每个输入值?

javascript - 单击时向图像映射部分添加颜色轮廓(jQuery)