我想知道如何使各个菜单项在页面加载时延迟淡入。
我希望它们不按时间顺序淡入，所以假设首先出现的是 #item 3，然后是 #item 1，然后是 #item 5 等等...
这样的 jQuery 或 JavaScript 代码看起来如何？我需要将其粘贴到代码中的何处？
非常感谢您的帮助!
最佳答案
这应该可以完成工作。基本上给你想要淡入淡出的元素一个隐藏的类，或者你可以定位的任何其他类名。然后将该类的显示设置为“无”。使用 jQuery，您可以通过其 ID 来定位要淡入的每个项目，并在该项目使用 fadeIn() 函数淡入之前设置所需的 delay()。
因此，在此示例中，#item2 将在 1500 毫秒后淡入，#item3 将在 2500 毫秒后淡入，#item1 将在 4000 毫秒后淡出。
希望这有帮助!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fade In</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li id="item1" class="hidden">First</li>
<li id="item2" class="hidden">Second</li>
<li id="item3" class="hidden">Third</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#item1').delay(4000).fadeIn('slow')
$('#item3').delay(2500).fadeIn('slow')
$('#item2').delay(1500).fadeIn('slow')
})
</script>
</body>
</html>关于javascript - 加载时淡入菜单项(有延迟)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34337890/