Hover navigation controls hidden content: when I hover over all buttons too quickly, they all stay visible?

Hover navigation controls hidden content: when I hover over all buttons too quickly, they all stay visible?

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?

  1. <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>