fadeTo() 仅在一定延迟后生效
我有一个简单的 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回答
-
鸿蒙传说
问题是你总是调用fadeTo()，即使你不需要。当您滚动通过y > 400时，fadeTo(400, 0)将调用 (fade out)。但是，当您进一步向下滚动时，fadeTo(400, 0)即使该元素不再可见，您也会继续调用。我不完全确定为什么淡出需要这么长时间，但我想这与在短时间内链接大量动画请求有关。您可以通过跟踪元素的可见性来解决问题。我添加了以下内容：if (y <= 400 == isVisible) return;// or if you find the above confusingif (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
您在滚动时多次调用 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'); } }});
随时随地看视频慕课网APP
相关分类
JavaScript