GrantU
GrantU

Reputation: 6555

Jquery delay not working correctly

I want to create a delay between these two messages:

$('#submit-account').html(animation + 'Submitting Data')
$('#submit-account').html(animation + 'Validating Email')

I have tried this:

var ani = "<i class='icon-spin'></i> "
$('#submit-account').html(ani + 'Wait').delay(5000).fadeIn();
$('#submit-account').html(ani + 'Done').delay(10000).fadeIn();

But there is no delay, why?

Upvotes: 0

Views: 3011

Answers (4)

Mohsen Safari
Mohsen Safari

Reputation: 6795

maybe you need to link JQuery 1.9.1, this is working: jsFiddle is here

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

and note that delay() method is for delaying between queued jQuery effects.

take a look at this jsFiddle


reference


Upvotes: 1

IBonesh
IBonesh

Reputation: 73

I'm not sure if i'm understanding it precisely or correct but there's a Default Built in JavaScript setTimeOut(); Function.

For more info :How to wait 5 seconds with jQuery?

Upvotes: 0

Simon Dorociak
Simon Dorociak

Reputation: 33495

I think that problem is because delay() only delays item(s) in a queue (jQuery queues automatically only animations). So try to modify fade function to fadeIn(0) and jQuery will interpret it as animation and now delay should works.

Upvotes: 3

Robin
Robin

Reputation: 864

make sure the #submit-account is hidden already.

instead of your code you can try this

$('#submit-account').html(ani + "Wait").fadeIn(5000);


 $('#submit-account').html(ani + "Done").fadeIn(5000);

This will control the speed of the fadein effect. or if you want the div to be fadein after some time, you can use the setTimeOut() function.

Hope this will help you

Upvotes: 1

Related Questions