1

I'm using this piece of code from a fellow SO user:

   $("#rightSubMenu").mousemove(function(e){
      console.log('executed');
      var h = $('#rightSubMenuScroller').height()+13;
      var offset = $($(this)).offset();
      var position = (e.pageY-offset.top)/$(this).height();
      if(position<0.33) {
         $(this).stop().animate({ scrollTop: 0 }, 1000);
      }
      else if(position>0.66) {
         $(this).stop().animate({ scrollTop: h }, 2000);
      }
      else
      {
         $(this).stop();
      }
   });

What it does, basically, is that it moves #rightSubMenuScroller, which is inside #rightSubMenu, whenever you hover over rightSubMenu. The problem is that with every pixel moved, it executes the whole function again resulting in a laggy animation.

When I activate the scrolling and move the mouse away from the element, the animation is nice.

I need to fix the code so that it doesn't lag. Any ideas how?

Steven de Salas
  • 20,944
  • 9
  • 74
  • 82
Frantisek
  • 7,485
  • 15
  • 59
  • 102

2 Answers2

3

You should add event.stopPropagation() at the end of this event call. 

$("#rightSubMenu").mousemove(function(e){
  // You code...
  e.stopPropagation();
});

This will prevent the event bubbling up the DOM tree.

Alternatively and depending on your DOM structure, try event.stopImmediatePropagation() which keeps all other event handlers executing.

Steven de Salas
  • 20,944
  • 9
  • 74
  • 82
2

look at it now: http://jsfiddle.net/n3Q9j/6/

kleinohad
  • 5,800
  • 2
  • 26
  • 34