jquery - jQuery 延迟在此示例中无法正常工作

Question

我对 jQuery 延迟（）有疑问。它根本不起作用。我过去使用过这个功能，它正在工作。我认为CSS中可能有一些东西，但我真的找不到。

这是一个jQuery代码：

$(document).ready(function(){
 function delay() {
   $('.delay').slideDown(500);
  }
  setTimeout(delay, 2500);
});

这是 HTML 的代码：

  <div id="header">
        <img src="http://test.captive-portal.com/slideup/_images/header.png">
  </div>

    <div class="delay">
        <div class="spons"><img src="http://test.captive-portal.com/slideup/_images/brought-by.jpg"></div>          

        <div class="overflow">

            <div id="nav">

                <a href="#"><div class="menu-button1"><img src="http://test.captive-portal.com/slideup/_images/own-ad1.jpg"></div></a>
                <a href="#"><div class="menu-button"><img src="http://test.captive-portal.com/slideup/_images/b1.jpg"></div></a>
                <a href="#"><div class="menu-button"><img src="http://test.captive-portal.com/slideup/_images/b2.jpg"></div></a>
                <a href="#"><div class="menu-button"><img src="http://test.captive-portal.com/slideup/_images/b3.jpg"></div></a>
                <a href="#"><div class="menu-button"><img src="http://test.captive-portal.com/slideup/_images/b4.jpg"></div></a>

            </div>

        </div>        
        <div id="finalbut">
            <a href="access-ok.html"><img src="http://test.captive-portal.com/slideup/_images/butt-go-online.png"></a>
        </div>

  </div>

</div>

CSS（如果需要，可能会导致问题）在这里：CSS HERE

jsFiddle 中的所有内容都在这里：jsFiddle

Answer 1

您需要先隐藏它，然后才能显示它：

$(document).ready(function(){
    $('.delay').hide();
    function delay() {
        $('.delay').slideDown(500);
    }
    setTimeout(delay, 2500);
});

更简洁：

$(document).ready(function(){
    $('.delay').hide().delay(2500).slideDown(500);
});