jQuery delay() works after effect, but not before?

Question

I'm showing a line of text using a typewriter effect [http://plugins.jquery.com/project/jTypeWriter].

I want to:
1) Delay 3 seconds
2) Show typewriter text
3) Delay 4 seconds
4) Fade out

But step 1 doesn't happen with this code: $('blockquote').delay(3000).jTypeWriter({duration:1}).delay(4000).fadeOut();

Why does delay() not work at the beginning?

Answer 1

delay() only works within an animation queue - so yes, an animation needs to be called before it will work as you expect.

setTimeout() is probably the way to go:

var t = window.setTimeout(function(){
    $('#myDiv').jTypeWriter({duration:1}).delay(4000).fadeOut();
}, 3000);

Answer 2

To use .delay(), you would need to add the jTypeWriter() to the animation queue. You can use jQuery's .queue() method for this:

$('blockquote').delay(3000)
               .queue(function( n ){ $(this).jTypeWriter({duration:1}); n(); })
               .delay(4000)
               .fadeOut();

Calling the n() parameter in the .queue() is used to allow the next element in the queue to continue.

• http://api.jquery.com/queue/