Jquery Hover Flickering issue

Question

Hope u people will be fine. Here is my basic code:

http://jsfiddle.net/kr9pY/7/

in this demo you can see when we hover on div with id="container", a div with class="nav" fades in. But the problem is that after doing this if i hover on div with class="nav" the div fades out and in again, and if i mover cursor slightly within .nav div, it repeats this behavior repeatedly. I don't want to this behaviour when we hover on .nav div or mover cursor within this div.

Thank, and sorry for my bad english.

Answer 1

Try

$(document).ready(function(){ 

   $("#containerNav").hover(
   function() { $('.nav').stop(true, true).fadeIn(); },
   function() { $('.nav').stop(true, true).fadeOut(); }
   );
   });

Taken from http://api.jquery.com/stop/

I changed the markup to add a containing div as well which stops a mouse leave being called.

<div id="containerNav">
    <div class="nav"><a class="prev" href="#">Prev</a> <a class="next" href="#">Next</a>  </div>
    <div id="container">
        Some Content in Container
    </div>
</div>

Now when you hover over the controls your not doing a mouseleave which causes the blink.

http://jsfiddle.net/kr9pY/9/