Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i made a horizontal nav with dropdowns ,
and code it like when user hovers mouse on menu items
dropdowns appear with an animate effect, but i hovered
mouse rapidly over menu items and dropdowns showed up
at the same time after too many hovers, i think animate
buffer filled and that's why dropdowns showed like that

here's the code:

C#
$("#topNav > ul > li").hover(function(){
        var liNum = $(this).find("ul").find("li").length;
        var liHeight = $(this).height();
        var i = 1;
        var minus = 20;
        $(this).find("ul").find("li").each(function(){
            if(i <= liNum){
                $(this).animate({"opacity":"1" , "top":((i*liHeight)-minus)+"px"} , {duration: 300});
                minus --;
                i++;
            }
        });
        if(scrolled){
            $(this).find("ul").find("li").first().addClass("dropFirstChild");
        }
        else{}
    },function(){
        $("#topNav > ul > li > ul > li").animate({"top":"0" , "opacity":"0"} , {duration:100});
        $("#topNav > ul > li > ul > li").first().removeClass("dropFirstChild");
    });


how can i clear the buffer if it's the problem and get rid of it!
Posted
Comments
Can you create a jsFiddle, so that we can take a look?

1 solution

u just need to stop old hovers buffering using .stop() before animate()
$(this).stop().animate("opacity":"1" , "top": ((i*liHeight)-minus)+"px") , (duration: 300));
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900