2011-09-19 84 views
0

坚持与我,我正在处理预先存在的代码,并试图不必检修代码。jQuery延迟无效果?

我正在处理需要延迟500毫秒弹出窗口的翻转弹出式菜单。在疯狂的CSS黑客做过这样:

#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> 

所以我杀了“#nav UL:悬停UL” CSS定义和jQuery的

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

看齐的原代码写了一个基本的班轮本质上,除了现在在JS控制

于是我在逻辑上,添加延迟,开始的setTimeout

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

另外还有很多其他组合。通过setTimeout发送$(this)似乎是一个痛苦的屁股。我试着研究.delay(),但它似乎只适用于效果队列,而且我不确定如何将效果队列整合到该效果队列中以使所有内容看起来不错。所以任何帮助,将不胜感激

+0

您没有为setTimeout()设置超时期限。 setTimeout有两个参数,一个函数或一个语句和一个时间(以毫秒为单位) –

+0

对不起,我有它,只是忘了它在帖子中,将编辑 –

+0

你会注意到你的代码仍然没有正确设置。你的花括号不匹配。看看我在下面发布的代码。 –

回答

1

看到这个jsfiddle。

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

我不得不使用显示:无,而不是左方法的的jsfiddle因为它将不适左侧。

另外,你的内部ul不在css中指定的li内。

这里是如何将鼠标悬停中引用的这个参数传递给setTimeout。

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

为什么不使用.hoverIntent()

+0

这会工作,但我必须在Chrome中的JS控制台中进行测试,所以插件很难通过测试。我会进一步研究那一个,但是,它看起来确实会帮助我们走下去 –