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.

Answer 1

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);