Wait 300ms and then slide down menu using jQuery
- by Derfder
I tried this js code:
<script type="text/javascript">
$(document).ready( function() {
var timer;
$('.top-menu-first-ul li').hover(function(){
if(timer) {
clearTimeout(timer);
timer = null
}
timer = setTimeout(function() {
$(this).find('ul').slideToggle(100);
}, 500)
},
// mouse out
});
});
</script>
with this html:
<ul class="top-menu-first-ul">
<li>
<a href="http://google.com">Google</a>
<ul class="top-menu-second-ul">
<li><a href="http://translate.google.com">Google Translate</a></li>
<li><a href="http://images.google.com">Google Images</a></li>
<li><a href="http://gmail.google.com">Gmail</a></li>
<li><a href="http://plus.google.com">Google Plus</a></li>
</ul>
</li>
<li>
<a href="http://facebook.com">Facebook</a>
</li>
<li>
<a href="http://twitter.com">Twitter</a>
</li>
</ul>
but it is not working.
I would like to show the submenu when hovering over e.g. Google link and other will appear after 300ms.
So, I need to prevent loading submenu when the user just quickly hover over it and not stay on hover link for at least 300ms.
Then I need to stop executing code (or slide up) when he leaves the link. Because if he go over and back and over and back a copule of times he stop doing hovering anfd the code is still executing itself how many times he had hover over the link. I need somehow prevent this to happen.
EDIT: I need to solve this without plugins like hoverIntent etc. if possible, just plain javascript and jQuery
