頂部屬性在動畫功能中不起作用
[英]top attribute not working in animate function
問題描述
在下面的代碼中， JQuery的 動畫功能的top屬性不起作用，但是opacity屬性正確起作用，您如何看待這個問題？
$(function() { $(window).on('scroll', function() { var top = $(this).scrollTop(); $('#lan').animate({ top: top + 'px' }, 1000); }); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Test</title> </head> <body> <div id="lan">My First Dangerous</div> </body> </html>
4 個解決方案
解決方案1
1 已采納 2019-03-08 15:49:56
何時目的是為了證明“動畫”功能有效。
因為您需要將“元素”的“位置”值設置為“絕對，相對或固定”。 例如。 position: fixed;
$(function() { $(window).on('scroll', function() { var top = $(this).scrollTop(); $('#lan').animate({ top: top + 'px' }, 100); }); });
body { min-height: 2000px } #lan { position: relative; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="lan">My First Dangerous</div>
解決方案2
0 2019-03-08 15:56:52
$(function() { $(window).on('scroll', function() { var top = $(this).scrollTop(); $('#lan').animate({ top: top + 'px' }, 1000); }); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Test</title> <style> body{ height: 800px;; overflow:scroll; } #lan{ position:relative; } </style> </head> <body> <div id="lan">My First Dangerous</div> </body> </html>
解決方案3
0 2019-03-08 16:32:05
我假設您希望有一個元素來將其保留在視口中...但是通過動畫顯示，該元素試圖保持滾動。
這是一個有趣的效果。
必須將元素absolute定位為跟隨scrollTop位置。 在position fixed ，該位置與文檔無關，而與視口無關。
現在，滾動播放動畫很危險…… scroll事件像機關槍一樣觸發。 您只是不能在每個滾動事件上觸發動畫（具有其自身的延遲）。 您只會在動畫隊列中堆積大量相同的動畫……而這顯然不是這里所期望的。
因此...使用標志來了解上一個滾動事件是否已經觸發了動畫，因此可以return以避免觸發其他事件。
然后，我建議增加一個延遲，以等待用戶滾動結束。 那不是絕對的“安全”，但是我想出了400ms的延遲，這是相當不錯的。 那是因為我也將動畫延遲降低到了100ms（快！）。 動畫延遲時間過長可能會導致問題，因為用戶可以在動畫時間的同時再次滾動...並且結束位置將是錯誤的。
這不是一個“完美”的解決方案……但這可能已經足夠了。
$(function() { // Variable to be used as a "flag" scrolling = false; // Variable to store the scrollTop position var top; // scroll handler $(window).on('scroll', function() { // Update the top position on every scroll event top = $(this).scrollTop() + 10; // Prevent the rest of execution // before the animation already triggered animation has finished if (scrolling) { return; } // User is scrolling scrolling = true; // Wait a little more before starting the animation // 400 ms seems like a good delay. setTimeout(function() { // Animate! $('#lan').animate({ top: top + 'px' }, 100, function() { // Animate quite fast is suggested here scrolling = false; }); }, 400); // setTimeout delay (can be longer...) }); });
body { min-height: 2000px } #lan { position: absolute; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="lan">My First Dangerous</div>
解決方案4
-1 2019-03-08 15:52:51
您應該將balise <script></script>放在</body> 。 不在head 。 我希望有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="lan">My First Dangerous</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
jQuery動畫到頂部功能不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.