javascript - 滚动时 JQuery 动画滞后

Question

当我向下滚动时，我的标题最小化，但是当我返回到页面顶部时，它返回到完整大小有一个延迟。当我进一步滚动时似乎更糟。

我拥有的 Javascript:

$(document).ready(function () {
    $("header").animate({
        height: "140px"
    }, 200);
    $("header>h2").show(200);
});

$(window).scroll(function () {
    if ($(document).scrollTop() > 0) {
        $("header").animate({
            height: "70px"
        }, 200);
        $("header>h2").hide(200);
    } else {
        $("header").animate({
            height: "140px"
        }, 200);
        $("header>h2").show(200);
    }
});

如果我将动画时间设置为 0，我似乎不会遇到同样的问题，这就是为什么我假设是动画问题。

他们是否存在某种固有的延迟，比如必须等到一个人完成后再做下一个？如果是这样(或任何其他原因)是否有可能克服它并仍然有动画？

有一个 JSFiddle here

Answer 1

问题是每次滚动时，都会触发一个 200 毫秒过渡的动画。这些排队并一一处理，这就是您看到滞后的原因。您可以停止每个滚动上的任何现有动画:

$("header").stop();

您的完整代码:

$(document).ready(function () {
    $("header").animate({
        height: "140px"
    }, 200);
    $("header>h2").show(200);
});

$(window).scroll(function () {
    $("header").stop();
    if ($(document).scrollTop() > 0) {
        $("header").animate({
            height: "70px"
        }, 200);
        $("header>h2").hide(200);
    } else {
        $("header").animate({
            height: "140px"
        }, 200);
        $("header>h2").show(200);
    }
});

在这里 fiddle :http://jsfiddle.net/u06sg6a2/