slide problem with hover (bouncing slider!)
Hi,
I've encountered a problem when using the slide functions along with
the hover event.
I wish to only show a sub-list within a list when the mouse cursor is
over the sub-list's parent list item. A concise version of my code is
shown below and a working copy can be found here:
http://www.paulpepper.co.uk/scratch/gnasher.html.
The difficulty occurs when passing the mouse cursor over the second
item in the top-level list - finish the mouse movement in the right
place, just below the sub-list, and the sub-list will continually
slide open and then closed, like a pair of gnashing teeth!!
Have I found a bug, or am I missing something in my use of the hover
event or the slide functions? Either way, if anyone can explain what's
going on then I'd be grateful!
Thanks,
Paul.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#submenu").hide();
$("#menu").hover(
function(){
$("#submenu").slideDown();
},
function(){
$("#submenu").slideUp();
});
});
</script>
</head>
<body>
Show and hide list items (submenu items) using jquery's hover with
slide callbacks:
<ul>
<li>item 1</li>
<li id="menu">item2
<ul id="submenu">
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
</html>