在这个例子中,jQuery延迟无法正常工作

时间:2012-11-20 20:25:21

标签: jquery css slidedown

我遇到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

1 个答案:

答案 0 :(得分:5)

您需要隐藏它才能显示它:

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

更简洁:

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