Javascript 为什么反向动画（）不能立即启动？

我正在使用$（window）。当从视口顶部滚动时，滚动以设置网站顶部标题的动画。初始条件工作正常，所有animate（）效果都正常。问题是，当我滚动回页面顶部时，页眉不会动画化回原始设置（有几次，但在长时间暂停后）

jsfiddle：

jQuery：

var $headerBar   = $(".header"),
    $window    = $(window),
    offset     = $headerBar.offset(),
    topPadding = 0;

$window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        //$headerBar.stop().animate({
            //marginTop: $window.scrollTop() - offset.top + topPadding
        //});

        console.log('Left the Top');

        // Add class 'fixed'
        $headerBar.addClass('moved');

        $('p.mainprinav_text').animate({ padding: '20px 45px 20px 0' });
        $('ul.mainprinavlist li a').animate({ padding: '20px 35px' });
        $('div.headerlogo').animate({ top: '6px' });
        $('div.headerlogo img').animate({ width: '90px' });
        $('body.site').animate({ paddingTop: '38px' });

    } else if ($window.scrollTop() <= offset.top) {
        //$headerBar.stop().animate({
            //marginTop: 0
        //});

        console.log('Back to Top');

        // Remove class 'fixed'
        $headerBar.removeClass('fixed');

        $('p.mainprinav_text').animate({ padding: '39px 45px 39px 0' });
        $('ul.mainprinavlist li a').animate({ padding: '39px 35px' });
        $('div.headerlogo').animate({ top: '13px' });
        $('div.headerlogo img').animate({ width: '120px' });
        $('body.site').animate({ paddingTop: '0' });
    }
});

var$headerBar=$（“.header”），
$window=$（window），
偏移量=$headerBar.offset（），
加总=0；
$window.scroll（函数（）{
if（$window.scrollTop（）>offset.top）{
//$headerBar.stop（）.animate({
//marginTop:$window.scrollTop（）-offset.top+topPadding
//});
log（'左上方'）；
//添加类“固定”
$headerBar.addClass（'moved'）；
$（'p.mainprinav_text'）。动画（{padding:'20px 45px 20px 0'}）；
$（'ul.mainprinavlist li a'）。动画（{padding:'20px 35px'}）；
$（'div.headerlogo'）.animate（{top:'6px'}）；
$（'div.headerlogo img'）。动画（{width:'90px'}）；
$（'body.site'）.animate（{paddingTop:'38px'}）；
}如果（$window.scrollTop（）出现问题，请执行以下操作

没有任何东西可以防止堆积

如果在每个
动画（…）
之前添加
.stop（）
，则它将防止您正在经历的导致动画延迟的队列累积

喜欢

虽然还有其他一些东西可以让这更好。你应该有一个开关，这样脚本的每个部分只触发一次，动画可以用css替换，这样你就可以切换一个类，整个过程可以用更少的代码来完成

如果您对这些其他更改感兴趣，我可以再做一次演示。
这是大量代码。大部分代码与问题完全无关。请编辑它，以便只保留重现问题所需的最小数量。您正在调用
.animate（）
很多次，这就是延迟的原因。你只需要在到达顶部时调用一次，离开顶部时调用一次。不是每次滚动都会发生。我添加了一个JSFIDLE来显示效果。谢谢Kevin。你能告诉我如何整合所有动画（）吗为不同的选择器设置一个，这些选择器对效果有不同的调整？也许我的代码需要重新构造？我的方法有问题吗？抱歉，没有将正确的url粘贴到JSFIDLE。它现在就在那里。您可以有多个动画发生，但您只希望每个动画在每个滚动周期发生一次，而不是每个滚动事件不止一次。例如，当您从页面顶部滚动到页面底部时，滚动事件将触发数千次，具体取决于页面的高度和滚动的速度。这意味着您的动画方法也将被调用数千次。您需要对其进行去抖动，以便仅触发一次而不是几千次。如果你愿意的话，你介意用你的其他建议告诉我怎么做吗？谢谢FiLeVeR10@ScriptsConnect小提琴是否解决了您遇到的延迟问题？通过添加.stop（），是的。它很好地解决了这个问题。谢谢你向我指出这一点。@ScriptsConnect我已经清理了它，简化了css和jquery（现在约10行），现在您只需在
body
上切换一个类，css就会处理动画。如果您有任何问题，请告诉我。您的CSS3解决方案更流畅，更有意义。我只是担心跨浏览器支持。总体而言，非常好。非常感谢您的帮助。