Question

Stick with me, I’m dealing with pre-existing code and trying to not have to overhaul code.

I’m dealing with a rollover popup menu that needs a 500ms delay for the popup. Done in crazy CSS hacking as such:

#nav ul li ul {
  left: -9999999px;
}

#nav ul :hover ul {
  left: auto;
}   

<div id="nav">
   <ul>
     <li>Link here</li>
     <ul>Some popup content</ul>
   </ul>
</div>

So I killed the “#nav ul :hover ul” CSS definition and wrote a basic one-liner in jQuery

$("#nav ul li").live("mouseover", function () {$(this).children("ul").css("left", "auto"); return false})

Which emulates the original code, essentially, except now under JS control

So then I logically, to add the delay, started messing around with setTimeout

$("#nav ul li").live("mouseover", function () {setTimeout(function() {$(this).children("ul").css("left", "auto");} return false}, 500))

Plus, many other combinations. It seems to be a pain in the ass to send $(this) through setTimeout. I tried researching .delay(), but it seems to only be good for effects queues, and I’m not sure how nicely I can integrate an effects queue into this to make everything look nice. So any help would be appreciated

Answer 1

See this jsfiddle.

http://jsfiddle.net/wHBK8/1/

I had to use display: none instead of the left method for jsfiddle as it wouldn’t apply the left.

Also, your inner ul wasn’t within the li as specified in the css.

Here is how to pass this as referenced in the mouseover to setTimeout.

$("#nav ul li").live("mouseover", function () {
    var that= $(this);
    setTimeout(function() {that.children("ul").show();}, 5000);
    return false;
});