Question

I’ve put together a piece of code for a drop-down menu, bound to .hover(), however unfortunately the delay on setTimeout() doesn’t seem to work and as soon as the mouse is moved from .button, it sets the display property of #sub-nav to none.

Dreamweaver CS 5.5 evaluates the syntax as correct :(.

Here’s my code:

function retract(){ $('#sub-nav').css('display', 'none'); }

$('#header-restrict > .button').hover( function() {

  if($(this).html() == "Offers") {
      $('#sub-nav').css('display', 'block');
      $('#sub-nav').html('<a href="#">Add a New Offer</a> &nbsp;&nbsp;&nbsp; <a href="#">Edit an Offer</a> &nbsp;&nbsp;&nbsp; <a href="#">Get Offer Links</a>');
  }

  if($(this).html() == "Rotations") {
      $('#sub-nav').css('display', 'block');
      $('#sub-nav').html('<a href="#">Add a New Rotation</a> &nbsp;&nbsp;&nbsp; <a href="#">Edit a Rotation</a> &nbsp;&nbsp;&nbsp; <a href="#">Get Rotation Links</a>');
  }
}, function() { setTimeout(retract(), 4000); });

If anyone could comment on/answer as to why the delay doesn’t seem to be working, it would be greatly appreciated!

Answer 1

setTimeout(retract(), 4000)

should be

setTimeout(retract, 4000)

The former immediately executes retract, then passes its return value (namely undefined) to setTimeout. Since undefined is not a function, setTimeout attempts to convert it into a string and eval it, doing precisely… nothing.

The latter says “run the function retract 4000 ms from now.”