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

时间:2013-12-06 17:31:43

标签: javascript jquery css animation

我有一个扩展“悬停”的菜单,但问题是,如果我将鼠标悬停在某个项目上,并且该项目正在运行动画下一个项目动画将不会平滑(基本上是-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秒然后然后将鼠标悬停在上我正在扩张时将鼠标悬停在我身边!“你会看到下一个菜单动画流畅。

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

1 个答案:

答案 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');            
        });
    });    
});

Updated jsFiddle