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;
    }

elclanrs · Accepted Answer · 2012-06-27 15:53:07Z

2

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

Try with stop(1, 1)

answered Jun 27, 2012 at 15:53

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moin Zaman · Accepted Answer · 2012-06-27 16:05:42Z

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.

edited Jun 27, 2012 at 16:05

answered Jun 27, 2012 at 15:54

Moin Zaman

25.5k6 gold badges74 silver badges74 bronze badges

Collectives™ on Stack Overflow

JQuery - Having problems formatting using JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related