CODEWITHSUNDEEP
jquerycssslidedown
Piotr Ciszewski
Piotr Ciszewski

Reputation: 1801

jQuery delay is not working properly in this example

I have a problem with jQuery delay(). It is not working at all. I was using this function in the past and it was working. I think there may be something in CSS, but I can't find it really.

Here is a jQuery code:

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

And here is a code for 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 (if needed, as something there may cause an issue) is here: CSS HERE

Everything in jsFiddle is here: jsFiddle

Upvotes: 0

Views: 130

Answers (1)

user1726343
user1726343

Reputation:

You need to hide it before you can show it:

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

More concisely:

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

Upvotes: 5

Related Questions