Animação jQuery

[Carlos Rocha]

Então, eu tenho uma ul

ul#menuTopo {

    display: none;

}

ul#menuTopo > li > a {

	display: block;
    width: 50px;

}

<button id="abrirMenu">Abrir menu</button>

<ul id="menuTopo">

       <li><a href="">Link 1</a>

       <li><a href="">Link 2</a>

       <li><a href="">Link 3</a>

       <li><a href="">Link 4</a>

       <li><a href="">Link 5</a>

</ul>

$("#abrirMenu").click ( function() {

        var status =  $("#menuTopo").css("display");

       if ( status == "none") {

                 $("#menuTopo").animate (

                         $( this ).show()

                 );

     } else {

                 $("#menuTopo").animate (

                         $( this ).hide()

                 );

    }

});

O objetivo é que, ao clicar em abrir menu, as lis, que contem os itens do menu, aparecem uma após a outra e decima para baixo.

Mas não estou conseguindo!

Edited February 15, 2020 at 06:41 PM by carcleo

[N3lson]

$("#abrirMenu").click ( function() {

      $( "#menuTopo" ).animate({
      // o que queres fazer
      opacity: 0.25 //exemplo
      }, 5000, function() {
         $(this).slideToggle();
      });
    });
});