如何为我的菜单创建平滑的动画

How to create a smooth animation for my menu?

本文关键字：平滑 动画 创建 菜单 我的      更新时间：2024-04-19

我有一个菜单，可以扩展为"悬停时"，但问题是，如果我悬停在一个项目上，并且该项目正在运行动画，则下一个项目动画将不平滑（基本上子菜单将显示在动画中间）。

我已经创建了一个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代码。如果你仔细看59行，我已经添加了这个代码

if(j('.active').next('.jsub-menu').is(':animated')){ j('.active').next('.jsub-menu').hide(); }

现在，如果你将鼠标悬停在"在我展开时悬停我！"上，并且该菜单已设置动画，它将隐藏菜单（不要这样，但请耐心等待）。

因此，现在尝试将鼠标悬停在"悬停我"上，等待4-5秒和然后将鼠标悬停于"悬停在我展开时！"您将看到下一个菜单的动画效果流畅。

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

以下是我的操作方法。它检查它是否是父.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');            
        });
    });    
});

更新的jsFiddle

相关文章：