Para iterar individualmente em cada elemento especificado no *selector*
,usa-se o operador each
, que é uma função do JQuery [ .each() - para mais detalhes].
Dentro do callback
utilize o setTimeout
do próprio javascript para manipular um delay na animação.
No exemplo abaixo são utilizadas algumas variáveis para auxiliar na orquestração do efeito (var time
e var delay
).
Repare que na definição da variável delay
contém um if ternário (MDN - Operador Condicional Ternário
) que valida a seguinte condição: "Se o elemento container (#btn-menu
) dos elementos <li>
estiver com a classe show, o delay de exibição será de 200 milissegundos entre cada <li>
, senão o delay será de 0 milissegundos (ou seja, não haverá delay), escondendo os <li>
imediatamente.
Para que o if ternario funcione, foi inserido uma função toggleClass, que tira ou coloca a classe show
no container.
$(document).ready(function(){
$("#btn-menu").click(function (){
// Inserindo ou removendo a class do container
$(this).toggleClass('show');
// Variáveis que auxiliam a orquestrar a animação
// =============================================
var time = 0;
// If ternário que define a quantidade de milissegundos
var delay = $("#btn-menu").hasClass('show') ? 300 : 0;
//===============================================
// Operador EACH do jquery ( Muito semelhante ao convencional Foreach)
// @Parâmetro 1 - indice atual da iteração
// @Parâmetro 2 - elemento atual da iteração
$("li").each(function(index, el){
time = time + delay; // para cada elemento é incrimentado mais milissegundos na variável time
// Temporizador nativo do JS
// Parâmetro 1 - callback
// Parâmetro 2 - tempo em milissegundos
setTimeout(function(){
// ternario que faz o SlideDown ou Fadeout
$("#btn-menu").hasClass('show') ? $(el).slideDown('show') : $(el).fadeOut('slow');
}, time);
});
});
});
/** restante do código **/
li{
background-color:red;
border-bottom: 1px solid white;
width: 50%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-menu">MENU</button>
<ul id="menu">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>