When i quickly move my mouse pointer on menu bar slide down and slide up, it is fluctuating

Question

          (function($){

            //cache nav
            var nav = $("#topNav");

            //add indicator and hovers to submenu parents
            nav.find("li").each(function() {
                if ($(this).find("ul").length > 0) {
                    $("<span>").text("^").appendTo($(this).children(":first"));

                    //show subnav on hover
                    $(this).mouseenter(function() {
                        $(this).find("ul").stop(true,true).slideDown();
                    });

                    //hide submenus on exit
                    $(this).mouseleave(function() {
                        $(this).find("ul").stop(true,true).slideUp();
                    });
                }
            });
        })(jQuery);

Following is my code which i am using for slideUp and SlideDown of submenus.but when i continues slide on menu to slide down and slide up,then menus are fluctuating.

Answer 1

I have observed this behaviour before and I was only able to find an adequate solution by using the jQuery UI library to do effects on hide/show.

If you include the jQuery UI library you can use the following code which might not be optimal but it does not flicker or fluctuate.

//cache nav
var nav = $("#topNav");

//add indicator and hovers to submenu parents

nav.find("li").each(function() {
    if ($(this).find("ul").length > 0) {
        $("<span>").text("^").appendTo($(this).children(":first"));
        var $subMenu = $(this).find("ul");
        //show subnav on hover
        $(this).hover(
            function() {
                // --> this causes flicker $subMenu.stop(true,true).slideDown();
                $subMenu.stop(true,true).show("slide", {direction: "up"});
            },
            function() {
                // --> this causes flicker $subMenu.stop(true,true).slideUp();
                $subMenu.stop(true,true).hide("slide", {direction: "up"});
            }
        );
    }
});

http://jsfiddle.net/3leven11/k7akm/2/