Why delay() not working?

Question

Good day.

I want to make the script started working after 2 seconds after the page loads.

For this i use script:

setTimeout(function() {
    $("#searchbanner").animate( {width: "515"}, 1500 );
}, 2000);

but not work...

tell me please how right make?

possible duplicate of [Can I use .delay() together with .animate() in jQuery?](http://stackoverflow.com/questions/4247772/can-i-use-delay-together-with-animate-in-jquery) — Suresh Atta, Aug 27 '13 at 08:32

score 4 · Accepted Answer · answered Aug 27 '13 at 08:31

4

Try using jQuery's delay() method:

$(document).ready(function() {
  $("#searchbanner").delay(2000).animate( {width: "515"}, 1500 );
});

This delays the execution of later functions for a given time; in this case, it will wait 2000 milliseconds before running the .animate() method. More information can be found on the jQuery site.

EDIT: As one of the comments noted, part of the original problem may be the timing of when you are running your setTimeout call; if it is during the loading of the page then the time given is relative to when the script runs, not when the page has completed its loading. By using jQuery's .ready() method the execution waits until the entire document is completely loaded.

answered Aug 27 '13 at 08:31

Adrian Wragg

7,311
3
26
50

the +1 is for the `$(document).ready` cause that may be the problem. – Andreas Louv Aug 27 '13 at 08:33
@NULL Wrote that by instinct, but could be a secondary problem - will add a note, thanks. – Adrian Wragg Aug 27 '13 at 08:34
not work right - http://testwork.ru/10003/ block top with words "TEXT FOR TEST HEADER" – Alex N Aug 27 '13 at 08:37
@AlexN I'm looking at the source of that page, and only seeing your original code - which is throwing an error. – Adrian Wragg Aug 27 '13 at 08:41
@AdrianWragg see now please - line 93 – Alex N Aug 27 '13 at 08:43
@AlexN You still have your original, non-delayed, code there - line 108. Incidentally, you can chain jQuery commands into one, so may be able to write `$("#searchbanner").css("width","100px").delay(2000).animate( {width: "515px"}, 1500 );` – Adrian Wragg Aug 27 '13 at 08:47
@AdrianWragg line 108 - it action for `$("#krest").on('click',function(){` code when need change (when shoild start when page load) up - on line 93 – Alex N Aug 27 '13 at 08:52
@AlexN I do notice a jump 2 seconds after loading as the banner resizes; its possible jQuery cannot calculate the "starting" width properly so you may want to code that value into the CSS. On a clean page, http://jsfiddle.net/WTmgs/, the solution I've provided works perfectly. – Adrian Wragg Aug 27 '13 at 09:08

score 1 · Answer 2 · answered Aug 27 '13 at 08:37

You have two problems in your code:

If the DOM isn't loaded after the two seconds the timeout have specified the selector wont work, to fix that you can use jQuery(function($) {}) which is the same as jQuery(document).ready(function() {})
The width value is a string try change that to a number or add the pixel to the end:

jQuery(function($) { // <-- This makes local $ === jQuery no matter what.
    setTimeout(function() {
        $("#searchbanner").animate({width: 515}, 1500);
    }, 2000); //                           ^ See changed it to a number
});

the problem is that the script runs immediately without having to wait two seconds — Alex N, Aug 27 '13 at 08:48

score 0 · Answer 3 · answered Aug 27 '13 at 08:32

it take 3500 second to execute

2000 take settimeout 1500 animation callback function

take 2000 second now

   setTimeout(function() {
      $("#searchbanner").animate( {width: "515"} ); }
      , 2000);

take 1500 second now

  $("#searchbanner").animate( {width: "515"},1500 );

score 0 · Answer 4 · answered Aug 27 '13 at 08:32

You're not using delay, the jQuery method, but setTimeout, the JavaScript method, and the issue could be with the placement of your code. If you're not waiting for the document to load and just trying to execute this then a number of things could go wrong. Such as elements not being loaded, jQuery not being loaded, for instance.

Wait for the document to load simply by encapsulating your jQuery in $(document).ready(function() { });

score -1 · Answer 5 · answered Aug 27 '13 at 08:33

-1

try this

setTimeout(function() {
  $("#searchbanner").animate( {"width": "515"}, 1500 ) }
  , 2000);

answered Aug 27 '13 at 08:33

Harinder Singh

319
3
14

1

This appears to just be the original code with a semi-colon removed. – Adrian Wragg Aug 27 '13 at 08:37

Why delay() not working?

5 Answers5