Drop down navigation, when I hover over all buttons quickly, they all stay visible?

[sethwb]

Hello.

It's probably easiest for you to just slap my code into an html file and take a look.

I can't figure out why all the corresponding nav content items stay open if you hover over them quickly.

Try it: Run your mouse over the nav from left to right, or right to left very quickly.

All 5 of the corresponding div's that display will stay on screen. Yet the function clearly states to hide all others if you hover over one. There is also a mouseleave handler that is supposed to hide ****. If you do it slowly, one by one, it behaves like I want. Why is this? How do I fix it?

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#homefeature').mouseout(function(){
        });
		$('#homefeaturenav td').hover(
		function(){
			$(this).css('box-shadow','inset 0px 0px 10px red');
			$(this).css('-moz-box-shadow','inset 0px 0px 10px red');
			$(this).css('-webkit-box-shadow','inset 0px 0px 10px red');
			toDisplay = $(this).attr('name');
			$('div[id^=con]').hide();
			$('div #con'+toDisplay).slideDown('slow');
		},
		function(){
			$(this).css('box-shadow','inset 0px 0px 10px #fff');
			$(this).css('-moz-box-shadow','inset 0px 0px 10px #fff');
			$(this).css('-webkit-box-shadow','inset 0px 0px 10px #fff');
		});
		$('#homefeature').mouseleave(function(){
			$('.content').hide();
			$('');
		});
    });
</script>
<style type="text/css">
	div table td {border: 1px solid #000;text-align:center;box-shadow: inset 0px 0px 10px #fff;-moz-box-shadow: inset 0px 0px 10px #fff;-webkit-box-shadow: inset 0px 0px 10px #fff;}
	div table td {text-shadow: inset 0px 0px 2px #000;-moz-text-shadow: inset 0px 0px 2px #000;-webkit-text-shadow: inset 0px 0px 2px #000;}
	.content {height: 50;display:none;background-color:#eb9342;}
</style>
<div style="width: 100%; background-color: grey; margin: 50 auto;"></div>
<div id="homefeature" style="width: 900px; margin: 0 auto;">
    <div id="homefeaturenav" style="height: 50px; width: 100%; background-color: grey;">
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tbody>
                <tr>
                    <td name="1">
                        One
                    </td>
                    <td name="2">
                        Two
                    </td>
                    <td name="3">
                        Three
                    </td>
                    <td name="4">
                        Four
                    </td>
                    <td name="5">
                        Five
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="homefeatureplaceholder" style="height:200px; background-color: #bbb;"> Placeholder. </div>
	<div id="homefeaturecontent" style="width: 100%;">
		<div id="con1" class="content">Content 1.</div>
		<div id="con2" class="content">Content 2.</div>
		<div id="con3" class="content">Content 3.</div>
		<div id="con4" class="content">Content 4.</div>
		<div id="con5" class="content">Content 5.</div>
    </div>
</div>

[Spudhead]

I've fixed up a couple of JS errors in the code you posted, and added "px" to the CSS height rule for .content

The problem you're seeing is because you've still got an animation function running on the div you're trying to hide().

Try this:

<script type="text/javascript">
$(function(){
	$('#homefeaturenav td').hover(
		function(){
			$(this).css('box-shadow','inset 0px 0px 10px red');
			$(this).css('-moz-box-shadow','inset 0px 0px 10px red');
			$(this).css('-webkit-box-shadow','inset 0px 0px 10px red');
			$('.content').stop().css('height', '50px').hide();
			toDisplay = $(this).attr('name');
			$('div #con'+toDisplay).slideDown('slow');
		},
		function(){
			$('.content').stop().css('height', '50px').hide();
			$(this).css('box-shadow','inset 0px 0px 10px #fff');
			$(this).css('-moz-box-shadow','inset 0px 0px 10px #fff');
			$(this).css('-webkit-box-shadow','inset 0px 0px 10px #fff');
		}
	);
});
</script>

Call stop() to remove any current animation, and then manually reset the height of the div back to the default before you hide it.