Question

我想知道如何使单个菜单项在页面加载延迟时淡入。我希望他们不按照时间顺序淡入淡出，所以让我们首先说出#item 3，然后是#item 1，然后是#item 5等等......

这样的jQuery或javascript代码看起来怎么样？代码在哪里我需要粘贴它？

非常感谢您的帮助！

Answer 1

这应该可以胜任。基本上给你想要淡化的元素一个隐藏的类，或者你可以定位的任何其他类名。然后，将该类的显示设置为＆＃34; none＆＃34;。使用jQuery，你可以通过它的ID定位你想要淡入的每个项目，并在使用fadeIn（）函数在fadedIn之前设置一个所需的delay（）。

所以在这个例子中，＃item2将在1500ms后淡入，＃item3在2500ms之后，＃item1将在4000ms之后。

希望这有帮助！

＆＃13;

    <!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>

＆＃13;

Answer 2

您可以使用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 3

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

<强> 1。在CSS

中将元素的“display”属性设置为“none”

<强> 2。将您的代码放入“$（document）.ready（function（）{此处}）”包含jQuery库

之后

第3。将延迟（值）设置为您要显示元素的订单所需的元素

<强> 4。为元素调用淡入淡出函数或任何其他效果或函数

您可以按所需的顺序显示元素，只需相应地设置延迟（值）即可。您希望元素出现的时间越晚，您设置此值就越高。

在此示例中，元素按时间顺序显示，只需更改延迟（值）以满足您的需要。您可以根据需要选择元素。例如，此处ID不用于选择元素，但也可以使用。这种方法也很有效！

请记住首先包含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

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

4 个答案:

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