JQuery 滚动时动画滞后

Question

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

我的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

发生这种情况是因为不断调用滚动事件，因此也调用了动画函数。但这不是必需的，因为一旦 scrollTop 大于 0 并且 header 被隐藏，header 将保持原样并且没有理由进行动画处理。一种简单的解决方案是使用如下内容修改代码，

http://jsfiddle.net/v6rspv0k/

$(document).ready(function () {
    $("header").animate({
        height: "140px"
    }, 200);
    $("header>h2").show(200);
});
var headerNotShown = false;
$(window).scroll(function () {
    if (!headerNotShown&&$(document).scrollTop() > 0) {
        console.log("animation1");
        $("header").animate({
            height: "70px"
        }, 200);
        $("header>h2").hide(200);
        headerNotShown = true;
    } else if(headerNotShown&&$(document).scrollTop() ===0){
        console.log("animation2");
        $("header").animate({
            height: "140px"
        }, 200);
        $("header>h2").show(200);
        headerNotShown=false;
    }
});

Answer 2

问题是每次滚动时，都会触发一个 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/

JQuery 滚动时动画滞后

JQuery animation lag when scrolling

javascript

jquery

animation

scroll