Jquery .animate()方法似乎不能与css top属性一起工作

Jquery .animate() method doesnt seem to work with css top property

本文关键字：css top 属性 工作 一起 不能 animate 方法 Jquery      更新时间：2023-09-26

嘿，伙计们，我正试图创建一个菜单，滚动到某一点后从页面顶部滑下，并固定在浏览器的顶部。由于某种原因，jquery动画功能似乎不完全工作，但如果我在动画功能后添加alert("hello")，它工作得很好。下面是我的函数代码:

function header()
{
    var main = document.getElementById("main");
    var rect = main.getBoundingClientRect();
    var menu = document.getElementById("menuappear");
    var y = rect.top;
    if (y <= 5)
    {
        $("#menuappear").animate({top:"0px"}, 500);
    }
    else
    {
        $("#menuappear").animate({top:"-93px"}, 500);
    }
}

我的html:

<body onscroll="header()">
...

<div id="menuappear">
    <a href="index.html"><img class="logo" src="images/logo.png" /></a>
    <ul>
        <li><a onclick="scrolltop()">Home</a></li>
        <li><a href="index.html">What We Do</a></li>
        <li><a href="#">Our Work</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Join Our Team</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
这是我的css: 
#menuappear{
    z-index: 1000000;
    position: fixed;
    top: -93px;
    width: 100%;
    height: 90px;
    background-color: #242424;
    margin: 0;
    padding: 0;
    border-bottom: 3px solid #49CBCD;
}

如果有人能告诉我我做错了什么，那就太好了。编辑:它有时会起作用，但真的没有响应

"如果在同一元素上调用多个动画方法，则之后的动画被放置在元素的效果队列中。在第一个动画完成之前，这些动画不会开始。当.stop()调用时，队列中的下一个动画立即开始。"- .stop() | jQuery API Doc

通过<body onscroll="header()">调用动画的方式多次调用animate()实际上是建立队列。这会导致延迟效应或根本不起作用。或者，您可以将animate()上的队列参数设置为false，而不是使用stop()。如下:$("#menuappear").animate({top:"-93px"}, {duration: 500, queue: false});

相关文章：