fadeTo() 仅在一定延迟后生效

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>

一只斗牛犬

浏览 68回答 2

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>

0

0

慕勒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');        }    }});

0

0

随时随地看视频慕课网APP

相关分类

JavaScript