我有一个扩展“悬停”的菜单,但问题是,如果我将鼠标悬停在某个项目上,并且该项目正在运行动画下一个项目动画将不会平滑(基本上是-menu将出现在动画中间。)
我已经创建了问题的a 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();
}
现在,如果你将鼠标悬停在“我正在扩展时将鼠标悬停在我身上!”并且该菜单已设置动画,它将隐藏菜单(不要那样,但请耐心等待。)
所以现在尝试将鼠标悬停在“只悬停我”上并等待4-5秒然后然后将鼠标悬停在上我正在扩张时将鼠标悬停在我身边!“你会看到下一个菜单动画流畅。
这是我想要的效果,但显然我不想在此过程中隐藏菜单。
答案 0 :(得分:4)
我将如何做到这一点。它会检查它是否是父.jnav
的直接子菜单,如果是,则使用slideDown
。否则它获得宽度(当元素具有visibility:hidden
)并在
var j = jQuery.noConflict();
j(document).ready(function () {
j('ul.nav').removeClass('nav').addClass('jnav');
j('ul.jnav li').hover(function () {
if (j(this).children('ul:first').hasClass('jsub-menu')) {
return false;
} else {
if(j('ul.jnav > li').is(this)) {
j(this).find('ul.sub-menu:first').not(':animated').slideDown(500);
} else {
var elem = j(this).find('ul.sub-menu:first').not(':animated');
elem.css({
visibility: 'hidden',
display: 'block'
});
var elemWidth = elem.width();
console.log(elemWidth);
elem.css({
width: '0px',
visibility: 'visible'
}).animate({
width: elemWidth
});
}
}
}, function () {
j(this).find('ul:first').slideUp(500, function () {
j(this).removeClass('jsub-menu').addClass('sub-menu');
});
});
});