JQuery / hover () / optimization problem. mousemove ()

Question

I am working on a basic modal example in which the modal will follow the mouse cursor while the user vibrates over a specific section.

The problem I encountered is that when moving from left to right, the modal delays are significant, as well as the triggers set by fadeOut () if the user pulled the mouse from a specific section.

From left to right, it works without a glitch.

In the violin, you can observe backwardness when moving the mouse over the <nav> from top to bottom, and also notice continuous performance from the bottom up.

If there are any recurring questions or related articles that you all know about, please point me in the right direction. My searches have so far been informative, but have not addressed this particular problem.

Here is my fiddle .

Thanks to everyone, advice is always welcome.

Ken

Answer 1

The problem is that jquery fires the onmouseout event when you add a modal element that receives "focus" and hover events do not fire on your nav element. I changed your example so that now it will be much better, check it out here

Answer 2

Oh, cool, classic example! The problem is that jQuery thinks you are exhausted when you touch section#coming-soon , so it explicitly launches fadeOut ...

One way to overcome this is to place section#coming-soon inside nav , so the script will still assume that you are inside section#coming-soon , even if you hover over it:

 <nav> <ul> <li><a>Home</a></li> <br /> <li><a>About</a></li> <br /> <li><a>My Work</a></li> <br /> <li><a>Blog</a></li> <br /> <li><a>Contact</a></li> </ul> <section id="coming-soon"> <h2>Coming Soon!</h2> </section> </nav> 

Example here: http://jsfiddle.net/gcJuz/1/

Answer 3

Just a few recommendations to help.

 // cache the jquery object var target = $('section#coming-soon'); target.hide(); // select the specific nav, not all navs $('nav:first').mouseenter(function(){ // only need to show it once on enter target.show(); }).mousemove(function(e) { // can't really avoid this unless you want to keep moving it around all the time // but show it only once you mouse over target.css({ 'position' : 'absolute', 'top' : e.pageY, 'left' : e.pageX }); }).mouseleave(function() { target.fadeOut(1300); });