Hiding text navigation when navigation close

Here i create a navigation but when you click on the navigation '+' all the links show up right away and i want them to be shown syncronized with the animation.

Here is the fiddle link: http://jsfiddle.net/6xVNz/3/

The jquery code:

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

Answers


just change your code like this :

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

This should do the trick:

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


Try this:

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

Check this if this works for you.

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

What i understand from your question is you want the menus to come one by one in synchronization.

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

Need Your Help

How do I call a method in a web service class once a day?

c# web-services

I've got a method in some class of a web service, but this isn't the webmethod and I need to call it once a day.

Select radio buttons based on json response

php javascript jquery ajax json

Can I get some ideas or an example of how I could populate the checked state of radio buttons depening on data loaded from the database?