JQuery - Having problems formatting using JQuery

Question

I'm in the process of learning JQ and I have created a div that when hovered over opens and when the cursor leaves the opened div closes.

Which all works perfect but this is my problem...

when the cursor goes over the div quickly the div freaks out and opens and closes several times very quickly.

Any advice would be greatly appreciated.

Andy

script type="text/javascript"
$(document).ready(function(){ 
$(".tagShow").hover(function(){  
    $(".panel").show("fast");  
},function(){
    $(".panel").hide("fast");        
});

});

</script>
<div class="tagShow">
<div class="panel">
<?= $tagCloud ?>
   </div>

<p class="flip">Select Category 
<span class="sCategory"></span></p>
</div>

css:

 div.panel,p.flip
 {
  margin:0px;
  padding:5px;
  text-align:center;
  background-color: #edf7f9;
  border:1px solid #24b4e0;
  position: absolute;
  z-index: 2;


   }

  div.panel
   {
    padding: 50px;
    height:140px;
    display:none;
    width: 778px;
    }

Answer 1

You could also check that the element is not being animated before showing and hiding by using the :animated selector.

Also check out the hoverIntent jQuery plugin.

Answer 2

There are many duplicates of this question. The solution is to use stop().

Try with stop(1, 1)