我有一個簡單的 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>
fadeTo() 僅在一定延遲后生效
一只斗牛犬
2023-03-24 14:11:29
