如何为我的菜单创建流畅的动画？

Question

我有一个扩展“悬停时”的菜单，但问题是如果我将鼠标悬停在一个项目上，并且该项目正在运行动画下一个项目动画将不流畅（基本上是子-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(); }

现在，如果您将鼠标悬停在 “在我展开时​​悬停我！” 并且该菜单已动画化，它将隐藏菜单（不希望这样，但请耐心等待）。

所以现在尝试将鼠标悬停在 “仅悬停在我身上” 和 WAIT 4-5 秒 和 THEN 悬停在 "在我展开时​​将鼠标悬停在我身上！” 你会看到下一个菜单的动画很流畅。

这是我想要的效果，但显然我不想在这个过程中隐藏菜单。

Answer 1

我会这样做。它检查它是否是父.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');            
        });
    });    
});

Updated jsFiddle