滚动时的jQuery动画滞后 [英] JQuery animation lag when scrolling

问题描述

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

I have a header minimise when I scroll down, however I have a lag for it returning to full size upon returning back to the top of the page. Seems to be worse when I scroll further.

我拥有的Javascript:

The Javascript I have:

$(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，我似乎没有遇到相同的问题，这就是为什么我假设是动画是问题所在.

I don't appear to get the same problem if I set the animation time to 0 which is why I'm assuming that it's the animations that are the issue.

是否存在与它们相关的某种固有延迟，例如必须等待一个人完成下一个延迟?如果是这样(或其他任何原因)，是否有可能克服它并且仍然具有动画效果?

Is there some kind of inherent lag associated with them, like it having to wait until one's finished to do the next? If so (or any other reason for it) is it possible to overcome it and still have the animations?

有一个JSFiddle 此处

There's a JSFiddle here

推荐答案

问题是，每次滚动时，动画都会以200ms的转换触发.这些排队并一个接一个地处理，这就是为什么您会看到滞后的原因.您可以在每次滚动时停止任何现有动画:

The issue is that each time you scroll, an animation is triggered with a 200ms transition. These queue up and process one by one which is why you see the lag. You can stop any existing animations on each scroll:

$("header").stop();

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

在这里拨弄: http://jsfiddle.net/u06sg6a2/

这篇关于滚动时的jQuery动画滞后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！