Javascript 我不能等到jQuery UI中的切换动画完成后再编写代码

我正在尝试开发一个带有jQuery UI动画的菜单来显示不同的子菜单，我需要等到切换效果隐藏控件完成后才能更改菜单的内容。现在，我的代码在切换效果期间更改菜单的内容。 要显示的二级菜单位于id=二级菜单换行的“div”内。在这里面，我有一些“ul”whoose“li”可见性，我需要在代码第3行完成隐藏二级菜单换行的切换效果时进行更改。现在，在切换效果期间，代码在二级菜单换行的内容中发生变化。第4行在第3行的切换效果完成之前运行

    jQuery(document).ready(function(){
    jQuery('#header-menu > li').click(function(){
        jQuery('#secondary-menu-wrap').toggle('slide',{direction: 'up'}, 500);
                jQuery('.secondary-menu > li').css('display','none');               
switch(this.id) {
    case 'menu-item-group':
        jQuery('#secondary-menu_group > li').css('display','block');
        break;
    case 'menu-item-research':
        jQuery('#secondary-menu_research > li').css('display','block');
        break;
    case 'menu-item-projects':
        jQuery('#secondary-menu_projects > li').css('display','block');
        break;
    case 'menu-item-publications':
        jQuery('#secondary-menu_publications > li').css('display','block');
        break;
    case 'menu-item-pressroom':
        jQuery('#secondary-menu_pressroom > li').css('display','block');
        break;
    case 'menu-item-formation':
        jQuery('#secondary-menu_formation > li').css('display','block');
        break
} 

    jQuery('#secondary-menu-wrap').toggle('slide',{direction: 'up'}, 500);
        });

        jQuery('.T_logo').click(function(){
        jQuery('.secondary-menu > li').css('display','none'); 
        });
});

我尝试了这两个选项，但没有达到预期效果：

    jQuery(document).ready(function(){
    jQuery('#header-menu > li').click(function(){
        jQuery('#secondary-menu-wrap').toggle('slide',{direction: 'up'}, 500,function(){
        jQuery('.secondary-menu > li').css('display','none');
});



switch(this.id) {
    case 'menu-item-group':
        jQuery('#secondary-menu_group > li').css('display','block');
        break;
    case 'menu-item-research':
        jQuery('#secondary-menu_research > li').css('display','block');
        break;
    case 'menu-item-projects':
        jQuery('#secondary-menu_projects > li').css('display','block');
        break;
    case 'menu-item-publications':
        jQuery('#secondary-menu_publications > li').css('display','block');
        break;
    case 'menu-item-pressroom':
        jQuery('#secondary-menu_pressroom > li').css('display','block');
        break;
    case 'menu-item-formation':
        jQuery('#secondary-menu_formation > li').css('display','block');
        break
} 

    jQuery('#secondary-menu-wrap').toggle('slide',{direction: 'up'}, 500);
        });

        jQuery('.T_logo').click(function(){
        jQuery('.secondary-menu > li').css('display','none'); 
        });
});

及

---

感谢您的帮助

如果我正确理解了您要实现的目标，那么您可以将代码简化如下：

$(document).ready(function(){ 
    $('#secondary-menu-wrap > ul').hide();

    $('#header-menu > li').click(function(){
        menuToShow = this.id.substring(this.id.lastIndexOf('-') + 1);

        $('#secondary-menu-wrap').slideToggle(500, function(){
            $('.secondary-menu').css('display','none');
           $('#secondary-menu-'+menuToShow).css('display', 'block');
            $(this).slideToggle(500);
        });
    }); 
});

开始时，我们隐藏了所有子菜单。这将在单击标题菜单列表中的元素时触发，并将子菜单索引存储在menuToShow变量中。在此之后，我们将在二级菜单包装器元素上触发slideToggle动画注意：您尝试切换，但您也得到了slideToggle事件，其默认方向为向上-因此我们只向其传递完成后要运行的持续时间和函数。 一旦我们关闭了包装器，我们将确保所有子菜单都被隐藏，并且与子菜单索引匹配的子菜单将被显示。最后，我们将包装器重新打开

---

JSFiddle用于演示：

你能正确解释你的问题吗？我无法理解，如果可能的话，创建一个fiddlesorry@himanshu。我试图更好地解释这个问题。谢谢@Gabor。我可以看出这在小提琴中起作用，但在我的菜单中我做不到。我正在使用wordpress的jQuery UI小部件，因此我尝试将$改为jQuery，并且“切换”的“滑动切换”效果可能会修改我共享的第一个代码，直到切换效果完成？否。。。我不明白发生了什么，我需要继续开发网页，尽快完成它，所以我只使用幻灯片效果来显示每个子菜单。当我完成其他事情时，我会再试一次。谢谢你的帮助。它在Fiddle中运行良好，因此我应该检查我的html以发现问题。

$(document).ready(function(){ 
    $('#secondary-menu-wrap > ul').hide();

    $('#header-menu > li').click(function(){
        menuToShow = this.id.substring(this.id.lastIndexOf('-') + 1);

        $('#secondary-menu-wrap').slideToggle(500, function(){
            $('.secondary-menu').css('display','none');
           $('#secondary-menu-'+menuToShow).css('display', 'block');
            $(this).slideToggle(500);
        });
    }); 
});