加载时淡入菜单项（有延迟）

Question

我想知道如何使单个菜单项在页面加载延迟时淡入。

我希望它们不是按时间顺序淡入，所以假设首先出现的是 #item 3，然后是 #item 1，然后是 #item 5，依此类推。 .

这样的 jQuery 或 JavaScript 代码看起来如何，我需要将其粘贴到代码中的什么位置？

非常感谢您的帮助！

Answer 1

您可以使用 setTimeout 并将其放入闭包中并工作。

$(function () {
  var currentTime = 0;
  $("#item1, #item2, #item3")
    .hide()
    .each(function () {
    (function (which, currentTime) {
      setTimeout(function () {
        which.fadeIn(100);
      }, currentTime);
    })($(this), currentTime);
    currentTime += 2500;
  });
});

div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="item1">This is menu 1.</div>
<div id="item2">This is menu 2.</div>
<div id="item3">This is menu 3.</div>

完整代码

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <meta charset="utf-8" />
    <script>
      $(function () {
        var currentTime = 0;
        $("#item3, #item1, #item2")
          .hide()
          .each(function () {
          (function (which, currentTime) {
            setTimeout(function () {
              which.fadeIn(100);
            }, currentTime);
          })($(this), currentTime);
          currentTime += 2500;
        });
      });
    </script>
    <style>
      div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
    </style>
    <title>My Menus</title>
  </head>
  <body>
    <div id="item1">This is menu 1.</div>
    <div id="item2">This is menu 2.</div>
    <div id="item3">This is menu 3.</div>
  </body>
</html>

Answer 2

这应该可以完成工作。基本上给你想要 fadeIn 的元素一个隐藏的 class，或者你可以定位的任何其他 class 名称。然后将 class 的显示设置为 "none"。使用 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>

Answer 3

这可以通过以下步骤实现：

1.在CSS

中设置元素的"display"属性为"none"

2。把你的代码放在 "$(document).ready(function(){ 这里 })" 包括jQuery库

3。将 delay(value) 设置为您想要显示元素的顺序所需的元素

4.为元素调用淡入淡出函数或任何其他效果或函数

你可以让元素以你想要的任何顺序出现，你只需要相应地设置延迟（值）。您希望元素出现的时间越晚，该值就应该设置得越高。

在此示例中，元素按时间顺序出现，只需更改 delay(value) 以满足您的需要。您可以根据需要 select 元素。例如，这里的ID 不用于select 元素，但也可以使用。这个方法也很管用！

记得先包含 jQuery 库！

<!DOCTYPE html>
<html>
    <head>
        <style>
            li {
            display: none
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">        </script>
        <script>
            $(document).ready(function(){
            $("li:nth-child(1)").fadeIn();
            $("li:nth-child(2)").delay("1000").fadeIn();
            $("li:nth-child(3)").delay("2000").fadeIn();
            $("li:nth-child(4)").delay("3000").fadeIn();
            $("li:nth-child(5)").delay("4000").fadeIn();
            $("li:nth-child(6)").delay("5000").fadeIn();
            $("li:nth-child(7)").delay("6000").fadeIn();
            $("li:nth-child(8)").delay("7000").fadeIn();
            $("li:nth-child(9)").delay("8000").fadeIn();
            $("li:nth-child(10)").delay("9000").fadeIn();
        });
        </script>
    </head>
    <body>
        <ul>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
            <li>Fourth</li>
            <li>Fifth</li>
            <li>Sixth</li>
            <li>Seventh</li>
            <li>Eighth</li>
            <li>Ninth</li>
            <li>Tenth</li>

        </ul>
    </body>
</html>

Answer 4

假设这样一个包含未知数量项目的列表

<div class="fadein-delay">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  ...
</div>

您将获得一个更加模块化的脚本

$(function () {
  $(".fadein-delay > div").each(function(index) {
    console.log($(this).text());
      $(this).delay(300*index).fadeIn(600);
  });
});

和 css 最初隐藏所有项目

.fadein-delay > div {
  display: none;
}

这是一个工作示例https://codepen.io/giorgosk/pen/aVpXad

加载时淡入菜单项（有延迟）

Fading in menu items on load (with delay)

javascript

jquery

fade

这可以通过以下步骤实现：