当我向下滚动时,我的标题最小化,但是当我返回到页面顶部时,它返回到完整大小有一个延迟。当我进一步滚动时似乎更糟。
我拥有的 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
最佳答案
问题是每次滚动时,都会触发一个 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/
关于javascript - 滚动时 JQuery 动画滞后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31743597/