Javascript 关闭导航时隐藏文本导航

在这里，我创建了一个导航，但当你点击导航“+”时，所有链接都会立即显示出来，我希望它们与动画同步显示

这里是小提琴链接：

jquery代码：

$("#open").click(function(){
    $(".nav, #close").show();
   $(".nav li").show();
    $(".nav li").each(function (i) {
        $(this).delay(50*i).animate({width:150},50); // Change 300 to something else if you like
    });
    $("#open").hide();
});

$("#close").click(function(){
    $("#close").hide();
        $($(".nav li").get().reverse()).each(function (i) {
            $(this).delay(50*i).animate({width:0},50); // Change 300 to something else if you like
    });
    $("#open").show();
});

---

只需按如下方式更改代码：

 $("#open").click(function(){
    $(".nav, #close").show();
   $(".nav li").show();
    $(".nav li").each(function (i) {
        $(this).delay(50*i).animate({width:150},50); // Change 300 to something else if you like
    });
    $("#open").hide();
});

$("#close").click(function(){
    $("#close").hide();
        $($(".nav li").get().reverse()).each(function (i) {
            $(this).delay(50*i).animate({width:0},50); // Change 300 to something else if you like
    });
    $("#open").show();
    $(".nav li").hide('slow');
});

试试这个：

$("#open").click(function(){
    $(".nav, #close").show();
   $(".nav li").show();
    $(".nav li").each(function (i) {
        $(this).delay(50*i).animate({width: "150px"},800); // Change 300 to something else if you like
    });
    $("#open").hide();
});

$("#close").click(function(){
    $("#close").hide();
        $($(".nav li").get().reverse()).each(function (i) {
            $(this).delay(50*i).animate({width: "0px"},800); // Change 300 to something else if you like
    });
    $("#open").show();
});

---

如果这对你有效，请检查此项

我从你的问题中了解到的是，你希望菜单一个接一个地同步出现

$("#open").click(function(){
    $(".nav, #close").show();
    //$(".nav li").show();
    $(".nav li").each(function (i) {
        //alert(i);
        $(this).delay(300*i).animate({width:150},50).show(); // Change 300 to something else if you like
        //$(".nav li").show();
    });
    $("#open").hide();
});

$("#close").click(function(){
    $("#close").hide();
        $($(".nav li").get().reverse()).each(function (i) {
            $(this).delay(50*i).animate({width:0},50); // Change 300 to something else if you like
    });
    $("#open").show();
});

---

这应该可以做到：

$("#open").click(function(){
    $(".nav, #close").show();

    $(".nav li").each(function (i) {
        $(this).delay(50*i).animate({width:150},50).show(50); 
    });
    $("#open").hide();
});

$("#close").click(function(){
    $("#close").hide();
    $($(".nav li").get().reverse()).each(function (i) {
        $(this).delay(50*i).animate({width:0},50).hide(50); 
    });
    $("#open").show();
});

---

你想在关闭后开始查看吗？这会影响关闭动画我的意思是，现在当你关闭导航时，在这个更改之前没有动画，导航链接一个接一个地关闭，现在它们都在boom中关闭，没有任何动画。你能解释一下你是如何做到的吗？在第一个

功能中，我使链接变成了使用
show（50）
在浏览器中逐个可见（确保该值与所需效果的宽度动画值相同）。第二次，我让它们在浏览器中一个接一个不可见。很抱歉，我在回答你之前的问题时出现了这个错误！：/
$("#open").click(function(){
    $(".nav, #close").show();

    $(".nav li").each(function (i) {
        $(this).delay(50*i).animate({width:150},50).show(50); 
    });
    $("#open").hide();
});

$("#close").click(function(){
    $("#close").hide();
    $($(".nav li").get().reverse()).each(function (i) {
        $(this).delay(50*i).animate({width:0},50).hide(50); 
    });
    $("#open").show();
});