Question

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

我有的Javascript：

$("#flash_message").html("<%= flash[:error] %>");

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

是否存在与他们相关的某种固有滞后，比如必须等到他们完成下一步才能完成？如果是这样（或任何其他原因）是否有可能克服它并仍然有动画？

有一个JSFiddle here

Answer 1

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

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毫秒的过渡触发动画。这些排队并逐个处理，这就是你看到滞后的原因。您可以停止每个卷轴上的任何现有动画：

$（ “头”）停止（）;

您的完整代码：

$(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);
    }
});

在这里小提琴：http://jsfiddle.net/u06sg6a2/

滚动时JQuery动画滞后

2 个答案: