jquery - 如何使用动画和缓动效果隐藏和显示元素

Question

我有一个 N 级菜单结构，我必须首先隐藏所有级别的子菜单，并在父菜单悬停时显示它们。我一直在尝试这个，我必须隐藏所有子菜单并在点击时显示它们，但是问题是当我单击其他父级时，必须关闭先前打开的菜单，并且如果我再次单击该菜单，则其子级应处于隐藏状态，并且在打开和关闭菜单时我想要一些缓动和动画效果它应该可以工作作为切换。

这就是我一直在尝试做的事情：

$(document).ready(function(){
$("li").children('ul').hide();
$("li a").click(function(){
$(this).next('ul').toggle();            
$(this).parent().siblings('li').children('ul').hide();  

这是我想要做的js小提琴

我不应该在菜单上使用任何类和或任何属性只有顶级ul有剩下的类每件事都应该在jquery中完成我需要缓动和动画部分

Answer 1

要完成@Tyriar 答案，这是如何使用 JQueryUI 缓动效果：http: //jqueryui.com/effect/#easing

http://jsfiddle.net/6u4LJ/2/

$(document).ready(function () {
    $("li").children('ul').hide();
    $("li a").click(function () {
        $(this).next('ul').animate({
            height: "show"
        }, 2000, 'easeInOutBounce');
        $(this).parent().siblings('li').children('ul').animate({
            height: "hide"
        }, 2000, 'easeInOutBounce');
    });
});

Answer 2

slideUp()您可以使用和添加一些动画slideDown()。

jsFiddle

$(document).ready(function(){
    $("li").children('ul').hide();
    $("li a").click(function(){
        $(this).next('ul').find('ul').hide();
        $(this).next('ul').slideDown();            
        $(this).parent().siblings('li').children('ul').slideUp();           
    });     
});

您也可以通过在活动列表项上使用带有类的 CSS3 过渡来相当轻松地做到这一点。

编辑：我现在明白了，当你点击打开一个时，尝试添加它来隐藏所有内部列表。

$(this).next('ul').find('ul').hide();