导航关闭时隐藏文本导航

Hiding text navigation when navigation close

本文关键字：导航 文本 隐藏      更新时间：2023-12-16

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

以下是小提琴链接：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();
});

只需像这样更改代码：

 $("#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: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").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

试试这个：

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

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

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();
});
相关文章：