Why do jQuery show() parameters not delay before calling the `complete` function?

Question

The jQuery API documentation for show() states that as of jQuery 1.4.3, one can call .show() like so:

.show( [duration ] [, easing ] [, complete ] )

With the arguments being:

duration (default: 400): A string or number determining how long the animation will run.

easing (default: swing): A string indicating which easing function to use for the transition.

complete: A function to call once the animation is complete.

I don't need easing, so I just call this version:

.show( [duration ] [, complete ] )

I have one function which is supposed to show a div, wait 5 seconds, then fade out over 500ms.

I have tried this:

  $('#some_div').show( {
      duration: 5000,
      complete: function() { fadeOutHelper(500); }
  } );

And this:

$('#some_div').show(5000, function() { fadeOutHelper(500); } );

And in neither case will show() actually wait 5000ms before calling the helper function.

I found a work-around on StackOverflow using setTimeout(): jQuery show for 5 seconds then hide

$('#some_div').show();
setTimeout(function() { fadeOutHelper(500); }, 5000);

Although I have a work-around, I would like to understand how I am misunderstanding some very simple function arguments in the jQuery show() docs.

It's not delay(), the duration is the time it takes to show something, not a waiting period before you run some random function, even if it can be somewhat used as such? — adeneo, Feb 11 '13 at 17:13
Where does is state in the documentation that it will delay the action by the duration? Duration is to specify the period over which you want the show method to execute, not a delay. Documentation states: `Duration: A string or number determining how long the animation will run.` — Nope, Feb 11 '13 at 17:13
Francois, will you post that as an answer? The solution is that I misunderstood the "delay" parameter in show(), since show is either on or off, a delay means nothing. (Why do they include it, then? It seems to do nothing.) — JD., Feb 11 '13 at 17:19
There is no delay parameter. There is a duration parameter. Showing an element can be animated. — Matt Ball, Feb 11 '13 at 17:20
@JD: `Why do they include it, then?` the duration is the time `show()` will take to execute, causing a fade-in effect to complete over the specified period of time. If you want a 5 second delay after show then your `setTimeout` solution should be OK. You can also look into [**delay()**](http://api.jquery.com/delay/) — Nope, Feb 11 '13 at 17:23

Matt Ball · Accepted Answer · 2013-02-11T17:27:20.040

2

I have one function which is supposed to show a div, wait 5 seconds, then fade out over 500ms.

Do you want to show a div over a period of 5 seconds, or show a div instantly and then wait 5 seconds for a callback? If it's the former, the second try will work just fine, except that you've got an extra } you need to remove. Use some extra white space and it's obvious:

$('#some_div').show(5000, function() {
    fadeOutHelper(500);
}}); // oh noes, synax error

If it's the latter then the "workaround" you cite is the correct way to implement what you want. setTimeout is not a hack. There is nothing "workaround-ish" about this:

$('#flash_helper').show();
setTimeout(function() { fadeOutHelper(500); }, 5000);

edited Feb 11 '13 at 17:27

answered Feb 11 '13 at 17:14

Matt Ball

354,903
100
647
710

Bade inline edit on my part. The extra } is not present in my code. What do you mean by "show a div over a period of 5 seconds"? Are you referring to fadeIn()? – JD. Feb 11 '13 at 17:16
By "show a div over a period of 5 seconds" I mean exactly what the API docs mean with the `duration` parameter: "How long the animation will run." – Matt Ball Feb 11 '13 at 17:18
Since show() provides no animation (unlike fadeIn and fadeOut), this means the parameter is pointless, does it not? – JD. Feb 11 '13 at 17:21
1

You're wrong, that's all there is to it. `show()` **does** provide animation. – Matt Ball Feb 11 '13 at 17:22
+1 for explaining that `setTimeout` as a viable solution and not a hack. – Nope Feb 11 '13 at 17:29

Why do jQuery show() parameters not delay before calling the `complete` function?

1 Answers1