Tutaj tworzę nawigację, ale po kliknięciu na nawigację "+" wszystkie linki pojawiają się od razu i chcę, aby były pokazane synowizowane z animacją.

Oto link Fiddle: http://jsfiddle.net/6xvNz/3/

Kod 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();
});
1
alonblack 29 listopad 2013, 11:34

5 odpowiedzi

Najlepsza odpowiedź

Wystarczy zmienić swój kod taki jak:

 $("#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');
});
1
airi 29 listopad 2013, 08:07
$("#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');
});
1
Amrendra 29 listopad 2013, 08:00

To powinno załatwić sprawę:

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

1
display-name-is-missing 29 listopad 2013, 11:41

Spróbuj tego:

$("#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();
});
0
Ringo 29 listopad 2013, 08:02

Sprawdź to, jeśli to działa dla Ciebie.

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

Rozumiem z twojej pytań, czy chcesz, aby menu przyjść jeden po drugim w synchronizacji.

$("#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();
});
0
Sunil Verma 29 listopad 2013, 08:04