导航关闭时隐藏文本导航

Question

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

以下是小提琴链接：http://jsfiddle.net/6xVNz/3/

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();
});

Answer 1

只需更改您的代码：

 $("#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');
});

Answer 2

$("#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');
});

Answer 3

这应该可以解决问题：

$("#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();
});

JSFiddle

Answer 4

试试这个：

$("#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();
});

Answer 5

检查这是否适合您。

http://jsfiddle.net/6xVNz/9/

我从您的问题中理解的是，您希望菜单逐个同步进行。

$("#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();
});