easy animation delay not working

Question

I'm new to jQuery. I'm using Animate.css and just want to add delay in the animation so I tried this:

$('#fadeInRight').delay(20000).addClass('animated fadeInRight');

Why is this not working?

can you provide samples of your code? Maybe a fiddle showig the problem? — badAdviceGuy, Feb 19 '14 at 15:37
did you try the other way round? `$('#fadeInRight').addClass('animated fadeInRight').delay(20000);` — Rahul Desai, Feb 19 '14 at 15:38
Surely one of the questions you found suggested to use setTimeout to delay addClass — Kevin B, Feb 19 '14 at 15:40
I'd go with Pranav's answer, using one "setTimeout" is a lot cleaner than specifying a bunch of CSS stuff. — Alexander Lozada, Feb 19 '14 at 15:58

Pranav C Balan · Answer 1 · 2014-02-19T15:47:16.677

3

setTimeout(function(){$('#fadeInRight').addClass('animated fadeInRight')},20000);

edited Feb 19 '14 at 15:47

answered Feb 19 '14 at 15:38

Pranav C Balan

I know this works, but I've never understood why jQuery's ".delay" doesn't. – Alexander Lozada Feb 19 '14 at 15:47
2

https://api.jquery.com/delay/ – Pranav C Balan Feb 19 '14 at 15:51

score 2 · Answer 2 · answered Feb 19 '14 at 15:41

2

The github page states another way to add a delay, no jQuery needed:

#yourElement {
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 2s;
    -vendor-animation-iteration-count: infinite;

}

Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)

answered Feb 19 '14 at 15:41

k0pernikus

1

Please note that this approach is only supported in IE10 and above. – kyle.stearns Feb 19 '14 at 15:43

2 Answers2