jQuery 1.4 Animation Techniques - Index of

In the previous screenshot, we see both submenus in their expanded, visible states.
[ 97 ]
Chapter 4
The flicker problem arises in part because of the visitor's perception of where the submenu
actually is. It is quite clear with the thin submenu where the boundaries of the menu are.
The visitor will most likely move their mouse pointer straight down into the submenu when
it appears on the page.
With the wider submenu, the visitor may not be quite as sure where they need to move their
mouse in order to enter the submenu. Instead of moving straight down from the Articles
top-level item into the submenu, they may instead move their mouse pointer diagonally
down and to the right, thinking that they can enter the second list of links that way.
It is this behavior that produces the flicker effect; try it out yourself—move the mouse
pointer diagonally down and to the right when entering the wide submenu. The submenu
should flicker on and off wildly.
Time for action – fixing the flicker
In this section we'll see how to prevent the flicker from spoiling the animation.
1. Fixing the problem is relatively easy. Simply update the JavaScript so that it appears
as follows (new code again shown in bold):
var ul = $("nav ul"),
timer = null;
ul.removeClass("purecss");
ul.find("a").each(function(){
if (!$(this).closest(".subnav").length) {
var a = $(this);
a.append("" + a.text() + "");
}
});
ul.find("a").hover(function() {
$(this).find("span").fadeIn("slow");
}, function() {
$(this).find("span").hide();
});
$(".subnav", ul).parent().mouseenter(function() {
clearTimeout(timer);
$(this).find(".subnav").stop(true, true).slideDown("fast");
});