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:
$("#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!