Getting rid of a delay in fading in an item

Question

If you see this JSFiddle here, I'm simply trying to animate in a button/link, albeit in a certain way. I want the link to still apply in layout so that the layout doesn't change at all.

My HTML:

<p>
    <a id="helloWorld" href="#" class="btn primary large">Hello, World! &raquo;</a>
    Fork this to get hacking on <span class="label stark">Bootstrap</span> and <span class="label stark">jQuery</span>.
</p>

My CSS:

#helloWorld { 
     visibility: hidden;
}

My jQuery:

$("#helloWorld")
    .delay(1000) // after a second
    .css("visibility", "visible") // make it 'visible
    .hide() // but hide it 
    .fadeIn(500); // then fade it in

I have to do the visibility:visible then hide() hack as noted here. The weird thing is that if I disable my JavaScript altogether, the link takes up the space normally. If I enable the JavaScript, then the layout gets all messed up. It appears that for some reason, it's executing the css() and the hide() before the delay is over! What am I doing wrong?

Sanketh Katta · Accepted Answer · 2017-02-09T21:02:20.027

2

The reason your code does not work is because .delay() does not work the same as javascript's setTimeout. Check out http://api.jquery.com/delay/ for more documentation on that.

Try this fix:

setTimeout(function() {
  $("#helloWorld").css("visibility", "visible").hide().fadeIn(500);
}, 1000);

Here is the jsfiddle: http://jsfiddle.net/7LGrS/2/

edited Feb 09 '17 at 21:02

answered Nov 21 '11 at 08:24

Sanketh Katta

5,961
2
29
30

1

So is it pretty safe to say that `delay()` only works with other animations, but not with other jQuery operations? Is that why my code wasn't working? – Naftuli Kay Nov 21 '11 at 19:56
1

Yes, the `.delay()` works on jQuery's `fx` queue. Other jQuery operations do not use the `fx` queue, so `delay()` is kinda useless there. – Sanketh Katta Nov 21 '11 at 20:25

score 0 · Answer 2 · answered Nov 21 '11 at 06:37

0

<a style='display:none; ' id="helloWorld" href="#" class="btn primary large">
 Hello, World! &raquo;
</a>

just add the style to the anchor

answered Nov 21 '11 at 06:37

zequinha-bsb

719
4
10

But then it doesn't occupy any space in the layout? – Naftuli Kay Nov 21 '11 at 06:38
Create a div of same size with explicit width and height. Then, in it, drop the anchor. – zequinha-bsb Nov 21 '11 at 06:40
TK Kocheran, you want the button to just appear after 1 second, fading in, correct? If so, your code is correct because DELAY DOES WORK AS TIMEOUT. A second (1000 ms) is a second either in DELAY or SETTIMEOUT. The css("visibility","visible") and hide() are unecessary. If you just create a holding place for the button, it will work. I changed your fiddle and tested it before answering. But I do not have an account there or want to create one. I use my own domain for my examples (zequinha-bsb.int-domains.com). – zequinha-bsb Nov 21 '11 at 15:39
I am assuming that your script is being ran from the document-ready. Counters of this kind would start only after the document is loaded, if put in there. – zequinha-bsb Nov 21 '11 at 15:44
Sorry if I could not help. My intentions where the best. – zequinha-bsb Nov 21 '11 at 15:44

Getting rid of a delay in fading in an item

2 Answers2