加载时淡入菜单项（有延迟）(Fading in menu items on load (with delay))

我想知道如何让单个菜单项在页面加载时延迟消失。我希望它们不会按照时间顺序褪色，所以我们假设首先出现的将是#item 3 ，然后是#item 1 ，然后是#item 5 ，等等......

这样一个jQuery或JavaScript代码看起来如何，我需要在代码中粘贴它？

非常感谢您的帮助！

I was wondering how to make the individual menu items fade in with delay on page load. I would like them to fade in not in a chronological order , so let's say first to appear would be #item 3, then #item 1, then #item 5 and so on...

How would such a jQuery or javascript code look and where in the code would I need to paste it?

Thanks a lot for help!

最满意答案

这应该做的工作。基本上给你想要淡化的元素一个隐藏的类，或者你可以定位的任何其他类名。然后，您将该类的显示设置为“无”。使用jQuery，您可以通过它的ID定位要淡入的每个项目，并在该项目将淡出之前设置所需的延迟（）。使用fadeIn（）函数。

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

希望这可以帮助！

    <!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> 
  
 
This should do the job. Basically give the elements that you want to fadeIn a class of hidden, or any other class name that you can target. You then set the display of that class to "none". Using jQuery you target each item that you want to fadeIn by its ID and you set a desired delay() before that item will be fadedIn using the fadeIn() function. 
So in this example #item2 will fadeIn after 1500ms, #item3 after 2500ms and #item1 after 4000ms. 
Hope this helps! 
 
 
  
      <!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>

更多推荐