我有一个简单的 JS 代码，在用户从顶部滚动一定数量（在本例中为 400）然后淡入所述元素后，我尝试淡出某个元素（带有 id“intro-section”的标签）当用户从顶部超过某些像素时。这是我正在使用的 JS、JQuery 代码：问题是 fadeTo() 函数仅在愚蠢的长时间后才显示动画效果（淡出在我越过 400px 标记后 20 秒开始，而在我返回后淡入过程开始，一个又一个开始20 秒）。我希望它在我超过 400 像素或小于 400 像素后立即淡入淡出。（我不想使用 fadeIn() 和 fadeOut() 函数，因为它们将显示设置为无）。这是整个过程的一分钟长视频： https ://imgur.com/a/lXQcgWB我不确定 fadeTo() 是否有某种自动添加的延迟，或者我是否做错了什么。$(document).scroll(function() { var y = $(this).scrollTop(); console.log(y); if (y > 400) { console.log('fading out'); $('#intro-section').fadeTo(400, 0.0); console.log('done fading out'); } else { console.log('fading in'); $('#intro-section').fadeTo(400, 1.0); console.log('done fading in'); }});body { height: 1000px;}#intro-section { padding: 2rem; height: 200px; width: 200px; background-color: red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body><div style="height: 300px"> Scroll down!</div><div id="intro-section"> Intro</div><div style="height: 100vh"></div> </body>
2 回答
鸿蒙传说
TA贡献1865条经验 获得超7个赞
问题是你总是调用fadeTo()，即使你不需要。当您滚动通过y > 400时，fadeTo(400, 0)将调用 (fade out)。但是，当您进一步向下滚动时，fadeTo(400, 0)即使该元素不再可见，您也会继续调用。
我不完全确定为什么淡出需要这么长时间，但我想这与在短时间内链接大量动画请求有关。
您可以通过跟踪元素的可见性来解决问题。我添加了以下内容：
if (y <= 400 == isVisible) return;
// or if you find the above confusing
if (y <= 400 && isVisible || y > 400 && !isVisible) return;
如果不必更改可见性，这会提前退出回调。这个保护子句确保fadeTo()只在实际需要时调用它。
另一件有助于提高性能的事情是确保您$("#intro-section")事先保存在变量中。你不应该忘记这$()是一个函数，每次调用它时都必须在 DOM 中搜索提供的查询选择器。把它想象成findSelectorInDOM("#intro-section"). 将结果缓存在变量中可能会大大加快速度，尤其是当您$()经常使用相同的参数调用时。
const $introSection = $("#intro-section");
let isVisible = $introSection.is(":visible");
$(document).scroll(function() {
const y = $(this).scrollTop();
console.log(y);
if (y <= 400 == isVisible) return;
isVisible = !isVisible;
const opacity = +isVisible;
console.log(`start fading to ${opacity}`);
$introSection.fadeTo(400, opacity, () => {
console.log(`done fading to ${opacity}`);
});
});
#intro-section {
padding: 4rem;
}
#intro-section .row {
padding: 4rem 8rem 7rem 8rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 300px">
Scroll down!
</div>
<div id="intro-section">
Intro
</div>
<div style="height: 100vh">
</div>
慕勒3428872
TA贡献1848条经验 获得超6个赞
您在滚动时多次调用 FadeTo，因此它在尝试淡入时仍然淡出。此代码已经过测试并且可以正常工作。
let fading = false;
jQuery(document).scroll(function() {
var y = jQuery(this).scrollTop();
console.log(y);
if(!fading) {
fading = true;
if (y > 400) {
console.log('fading out');
jQuery('#intro-section').fadeTo(400, 0.0, () => fading = false);
console.log('done fading out');
} else {
console.log('fading in');
jQuery('#intro-section').fadeTo(400, 1.0, () => fading = false);
console.log('done fading in');
}
}
});
添加回答
举报
0/150
提交
取消