我有一个菜单,在“悬停”时会展开,但问题是,如果我悬停在一个项目上,并且该项目正在运行动画,则下一个项目的动画将不会很流畅(基本上子菜单将在动画中间显示)。
我已经创建了JS Fiddle来展示这个问题。
我认为我的代码中的这部分引起了问题:
我已经创建了JS Fiddle来展示这个问题。
我认为我的代码中的这部分引起了问题:
j('.active').next('ul')
.removeClass('sub-menu')
.addClass('jsub-menu').css({
'visibility':'',
'opacity':'',
'height':get_height_of_first_child +'px',
'width':'0'
});
j('.active').next('.jsub-menu').animate({width:get_width},2000);
j('.active').next('.jsub-menu').animate({height:get_submenu_height},2000);
编辑:这是更新的Fiddle Code。如果你仔细看第59
行,我加入了这段代码:
if(j('.active').next('.jsub-menu').is(':animated')){
j('.active').next('.jsub-menu').hide();
}
现在,如果你悬停在一个"Hover me while I am expanding!"菜单上,并且该菜单正在动画过程中,它将隐藏菜单(虽然我不希望出现这种情况,但请耐心等待)。
现在,请尝试悬停在一个"Hover me"上,等待4-5秒钟,然后再悬停在"Hover me while I am expanding!"上,你会发现下一个菜单平滑地动画了。
这就是我想要的效果,但显然我不想在此过程中隐藏菜单。