jQuery blinking 'hover' animations

JavaScript
1

Hi. I uploaded the webpage to Dropbox so you can see the problem I’ve got:

http://dl.dropbox.com/u/1256196/DriftingSun/index.html

It is about the navigation menu; those fading in and out labels for buttons, to be precise.

Basically, each button here is an element of an unordered list with a background image. The labels (‘about’, ‘gallery’, etc.) are absolutely positioned spans, each inside of the respective li. When an li is hovered, the span shows up. Simple.

It was tempting to add a jQuery built-in fading effect to this thing, which I did. However, that resulted in a little but irritating problem. If you hover your cursor over a navigation button for a few times in a row (or if you simply approach the button from the top), the label will blink continuously, even after you stopped.

I’m not quite sure how to get rid of this. The simplest way, of course, is to abandon the fade in-out effect, but that equals giving in.

Any ideas?

Thanks in advance.

2

$(‘nav ul li’).hover(function(){
var $label = $(this).find(‘span’);
var marginValue = $label.width();
marginValue = marginValue / 2;
$label.stop(false,true).fadeIn(‘fast’).css(‘margin-left’, -marginValue);
},
function () {
$(this).find(‘span’).stop(false, true).fadeOut(‘fast’);
});

try this , before hover animation start ,stop the last animation.

3

I have to learn jQuery more, couldn’t think of such a simple solution.

Thanks a lot, it works better now.