jQuery /hover()/.mousemove() optimization issue

Question

I'm working on a basic modal example in which the modal would follow the mouse cursor as long as the user was hovering over a certain section.

The issue I'm having is, when going from left to right, the modal lags significantly, as well as triggers the fadeOut() set if the user were to mouse out of the specific section.

Right to left, works seamlessly.

In the fiddle, you can observe the lagginess when moving the mouse over the <nav> from top to bottom, as well as notice the solid performance from bottom to top.

If there are any duplicate questions or related articles that you all know of, please point me in the right direction. My searches thus far have been informational but have not adressed this specific issue.

Here is my fiddle.

Thank you all, as always pro advice is warmly welcomed.

Ken

simekadam · Accepted Answer · 2012-01-19 07:44:44Z

3

The issue is that jquery fires onmouseout event when you add the modal element it gets "focus" and hover events are not firing on your nav element. I altered your example so that it is wokring much better now, check it out here

answered Jan 19, 2012 at 7:44

simekadam

7,40411 gold badges61 silver badges81 bronze badges

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

1 Comment

Ken Over a year ago

Ohhhhh, that explains why when moving in the opposite direction of the modal it worked perfectly, thank you much!

Chris Kempen · Accepted Answer · 2012-01-19 07:49:21Z

3

Oh awesome, classic example! The problem is that the jQuery thinks you've moused-out once you touch the section#coming-soon, so it obviously runs the fadeOut...

One way to overcome this is to put the section#coming-soon inside the nav, that way the script will still think you're inside the 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/

answered Jan 19, 2012 at 7:49

Chris Kempen

9,6715 gold badges43 silver badges52 bronze badges

1 Comment

Ken Over a year ago

Also a solid approach! Thank you!

adrian · Accepted Answer · 2012-01-19 07:43:22Z

1

Just a few recommendations to help out.

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

answered Jan 19, 2012 at 7:43

adrian

2,3864 gold badges33 silver badges49 bronze badges

1 Comment

Ken Over a year ago

I agree with your optimizations, the modal still lags when moving from left to right ( or top to bottom in the fiddle), however.

Collectives™ on Stack Overflow

jQuery /hover()/.mousemove() optimization issue

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related