Javascript 子菜单“动画”；“弹出窗口”；

我有一个菜单，里面有子项。为了获得我想要的动画效果，我需要检索子菜单的宽度、高度及其第一个子菜单的高度。现在我的动画可以工作了，但有时我的子菜单只是“弹出”（它不会设置其宽度的动画）。

这是问题的症结所在

我正在使用以下代码：

var j = jQuery.noConflict();
j(document).ready(function () {

    j('ul.nav').removeClass('nav').addClass('jnav'); //Add jquery Class to our menu 

    j('ul.jnav li').hover(function () {
        if (j(this).children('ul:first').hasClass('jsub-menu')) { //Let's check if "jsub-menu" Class is here
            return false; //If it is ("jsub-menu" here) don't SlideDown...
        } else { //Else slide down if no class
            j(this).find('ul.sub-menu:first').not(':animated').slideDown(500);
        }

    }, function () {
        j(this).find('ul:first').slideUp(500, function () {
            j(this).removeClass('jsub-menu').addClass('sub-menu');
            j(this).css({
                'height': '',
                'width': ''
            });
        });

    });

    j('ul.jnav ul.sub-menu a').hover(function () {
        j(this).addClass('active');

        if (j('.active').next('ul.sub-menu').length) { //If submenu exist...
            j('.active').next('ul.sub-menu').css({
                'visibility': 'hidden',
                'opacity': '0',
                'display': 'block'
            }); //Show it so we can read its:

            var get_width = j('.active').next('ul.sub-menu').outerWidth(true); //WIDTH
            var get_height_of_first_child = j('.active').next('ul.sub-menu').children('li:first').outerHeight(true); //HEIGHT of its First Child
            var get_submenu_height = j('.active').next('ul.sub-menu').outerHeight(true); //HEIGHT of our menu

            j('.active').next('ul').removeClass('sub-menu') //Remove class from menu, add another class apply HEIGHT of FIRST CHILD and hide it again...
            .addClass('jsub-menu').css({
                'visibility': '',
                'opacity': '',
                'height': get_height_of_first_child + 'px',
                'width': '0'
            });
            j('.active').next('.jsub-menu').animate({
                width: get_width
            }, 1000, function () { //Animate WIDTH

                j('.active').next('.jsub-menu').animate({
                    height: get_submenu_height
                }, 1000); //callback animate HEIGHT
            });
        } //End if    
    }, function () {
        j('.active').removeClass('active');
    });

});

我认为这是因为我的“向上/向下滑动”动画与“使用/高度设置动画”功能冲突，但我不确定。我试图通过在许多组合中添加

stop（）

，

stop（true，true）

，

stop（true，false）

来解决这个问题，但失败了。几天来我一直在努力解决这个问题，所以你们这些堆垛工是我唯一的希望。请帮忙！

---

谢谢

我终于能够复制这个错误

我为您编写了此代码，以替换动画的代码

var animating = false;
function animate($elm, options, callback) {        
    if (animating) 
        return;

    animating = true;
    $elm.animate(options, 1000, function() {
        animating = false;

        if (callback != undefined)
            callback();
    });        
}

从你的悬停回叫中这样叫它

animate(j('.active').next('.jsub-menu'), 
        {
            'width': get_width,
            'height' : get_submenu_height
        });

基本上，它会检查另一个动画是否已经在运行，在这种情况下它不会启动它。当动画停止时，该标志设置为false，让我们继续其他动画

您也可以在动画完成后传递回调以执行某些操作，但在您的情况下，您不需要它，因为您可以同时设置高度和宽度的动画

我试了一分钟，它看起来很光滑

以下是更新的feedle：

---

p.S.您可能还希望在jQuery包装器中使用$符号而不是“j”。

这是在任何浏览器中发生的还是仅在特定浏览器中发生的？看起来在所有浏览器中都会发生：（是的，我刚刚做过，而且我在Chrome上并没有发生过……看起来我不能复制这个错误，但是你可能想考虑使用CSS动画来代替它们，因为它们比JS动画SHIMM更平滑，你能帮我最后一个忙吗？试着把动画持续时间改为5000，然后在菜单是ExpA的时候做悬停。nding？因为在我的装备上，它甚至在铬合金中也不能很好地工作。