Question

I would like to develop a menubar where the tabs expand upwards as soon as a user puts the mouse cursor over a tab. Actually it works quite well, despite there is one problem: If the user puts the mouse-cursor over one tab and then moves it above the tab very fast, the tab starts moving up and down very often and very fast which looks like as if it would flicker.

Here is an example of how I implemented it: http://jsfiddle.net/enne87/wLGDG/34/

I hope you know what I mean when I say “Move the cursor over the tab and then upwards”. If not, I can show you a video which shows more precisely what i mean.

Btw. here is the javascript-code for the animation:

  $('#primaryMenu ul.menu li:nth-child(1)').hover(
  function () {
      $(this,this).stop(true,true).animate({bottom: '+=55'}, 300, function() {}); 
  },
  function () {
      $(this,this).stop(true,true).animate({bottom: '-=55'}, 300, function() {});
  }
);

I would be very thankful for help.

Cheers, enne

Answer 1

I know this is not fixed code, but here’s the problem:

The Problem

You are actually animating the location of the whole li node, which is creating artifacts. To clarify for other readers:

1. go to the live sample on the fiddle and approach a menu item from underneath. Do NOT move your mouse
2. the animation up will complete, but the mouse is now seen to trigger ‘leave’ and it will start moving back down
3. The animation down will complete, but then ‘enter’ is triggered and it begins up again, in an infinite cycle.

The flickering comes from a more extreme version of this:

1. approach from beneath the menu. The animation starts to move up
2. Move your mouse upwards toward the animating item

As you move the mouse, the upwards “stop” is triggered, sending the element directly to the top of the animation. But then you will re-enter the element again, triggering the animation if it’s not already at the top. Moving the mouse upwards while the element is NOT quite yet at the top will trigger the ‘leave’, sending the element directly to the bottom.

whew

The fix

So, the fix? Instead of animating the location of the menu, devise a way to animate the height such that it’s not pushing down but rather up (with the current CSS, simply animating height will expand the gray li downward, not up). This will involve revising the CSS to accomodate that switch. If the design dictates that the whole block needs to stay 200px tall (to give the illusion that it is moving), then the event should be bound to some sort of transparent container instead of the LI.

Unrelated Stuff

In the meantime, there are a few fundamental things wrong with the original code:

1. Why is the selector $(this,this) for the mouseenter/mouseleave? The second optional selector is a context. Using the same selector for both does not create a context, so you should just use $(this).

2. The event doesn’t need to be bound twice. They’re both li that meet the same description, so you can just have your selector look for:

$('#primaryMenu ul.menu li').hover( /* ... */);

Or if it’s actually critical for some reason to specify which li have the event, gang them together:

$('#primaryMenu ul.menu li:nth-child(1), #primaryMenu ul.menu li:nth-child(2)')