Jquery .animate() 方法似乎不适用于 css top 属性答案

【问题标题】：Jquery .animate() method doesnt seem to work with css top propertyJquery .animate() 方法似乎不适用于 css top 属性
【发布时间】：2014-07-27 05:40:47
【问题描述】：

大家好，我正在尝试创建一个菜单，该菜单在滚动到某个点后从页面顶部向下滑动并固定在浏览器顶部。出于某种原因，jquery animate 函数似乎没有完全工作，但如果我在 animate 函数之后添加一个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;
}

如果有人能告诉我我做错了什么，那就太好了。编辑：它有时会起作用，但确实反应迟钝

【问题讨论】：

“似乎并没有完全起作用……有时它有点起作用” - 你能更清楚地解释实际发生的情况吗？和/或在jsfiddle.net提供演示？
尝试在动画前添加$("#menuappear").stop();
是的，当然@nnnnnn 继承人小提琴：jsfiddle.net/the_warrier/jvhN3/1。实际发生的情况是，它有时会从顶部向下滚动，但有时不会，而且向下滚动所需的时间比我在代码中输入的时间要长得多。它应该需要半秒，但最终会晚 2 秒开始，然后动画需要半秒
@ChaseRocker 它是div 就在<div class="header"> 下方
哦，没关系，伙计们@bobthyasian 的解决方案奏效了。完全解决了这个问题，非常感谢。你能解释一下 .stop() 究竟做了什么让它更好地工作吗？

标签： javascript jquery html css jquery-animate

【解决方案1】：

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

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

【讨论】：