我有一個(gè)簡單的 JS 代碼，在用戶從頂部滾動(dòng)一定數(shù)量（在本例中為 400）然后淡入所述元素后，我嘗試淡出某個(gè)元素（帶有 id“intro-section”的標(biāo)簽）當(dāng)用戶從頂部超過某些像素時(shí)。這是我正在使用的 JS、JQuery 代碼：問題是 fadeTo() 函數(shù)僅在愚蠢的長時(shí)間后才顯示動(dòng)畫效果（淡出在我越過 400px 標(biāo)記后 20 秒開始，而在我返回后淡入過程開始，一個(gè)又一個(gè)開始20 秒）。我希望它在我超過 400 像素或小于 400 像素后立即淡入淡出。（我不想使用 fadeIn() 和 fadeOut() 函數(shù)，因?yàn)樗鼈儗@示設(shè)置為無）。這是整個(gè)過程的一分鐘長視頻： https ://imgur.com/a/lXQcgWB我不確定 fadeTo() 是否有某種自動(dòng)添加的延遲，或者我是否做錯(cuò)了什么。$(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>
fadeTo() 僅在一定延遲后生效
一只斗牛犬
2023-03-24 14:11:29
