3

Criei um menu para ver as possibilidades com as animações do jQuery. Eu queria que, quando clicasse no botão, o jQuery exibisse cada LI por vez, não todas ao mesmo tempo.

Eu queria um delay diferente em cada LI. Como faço?

O código que eu tenho é esse:

$(document).ready(function(){
    $('li').hide();

    $("#btn-menu").click(function (){
        $("li").slideToggle(600);
    });
});

$('li').hover(function(){
    $(this).css({
        'background-color':'#000000',
        'color': 'white'
    });

},function(){
    $(this).css({
        'background-color': 'red',
        'color': 'black'
    });
}
);
li{
    background-color:red;
    border-bottom: 1px solid white;
    width: 50%;
}
<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>

2 Respostas 2

6

Você pode utilizar um foreach com um delay(), multiplicando pelo "índice"... assim acredito que chegará ao efeito desejado.

E o aspecto do efeito você consegue brincando com os valores do delay e do intervalo da animação.

$(document).ready(function() {
      
      $("#btn-menu").click(function() {
        var lista = $("#menu li").css('display') === 'none' ?
          $("#menu li") :
          $($("#menu li").get().reverse());

        lista.each(function(i) {
          $(this).delay(200 * i).slideToggle(100);
        });
      });
});
li {
  background-color: red;
  border-bottom: 1px solid white;
  width: 50%;
  color: black;
  display: none;
}

li:hover {
  background-color: #000000;
  color: white;
}
<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>

4
  • Mas o que vc fez no codigo que agora ele tá com animação da esquerda para a direita e de cima pra baixo? Antes só estava de cima para baixo!! 31/10/2018 às 1:16
  • @WallaceCorrêa isso é consêquencia do toggle(), não tinha visto que você estava usando o `slideToggle(), veja a edição. 31/10/2018 às 1:23
  • @WallaceCorrêa era o aspecto que você queria? 31/10/2018 às 16:28
  • sim! Muito obrigado :D 1/11/2018 às 2:09
2

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 showno 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .