2

Estou desenvolvendo um site, e em seu cabeçalho deve conter um Dropdown que aparece ao dar um hover no link do cabeçalho, de preferência com a animação dele surgindo, porém ele está com um bug que quando você vai pro dropdown ele tenta se esconder, e então aparece novamente. Com CSS puro consegui faze-lo sem a animação de slide, mas gostaria de dar uma estilizada nele, já tentei com o CSS puro com transition e as animações do @webkit.

Eis o código abaixo:

HTML:

<li id="showDropdown" <?=$page=='areas.php' ? 'class="active"' : '';?>>
                <a class="areas" href="Javascript:void(0);">ÁREAS DE ATUAÇÃO</a>
                <ul class="dropdown-areas">
                    <? while($row_rsAreas = mysql_fetch_assoc($rsArea)) { ?>
                        <li>
                            <a href="area.php?id=<?=$row_rsAreas['area_id'];?>"><?=$row_rsAreas['area_titulo'];?></a>
                        </li>
                    <? } ?>
                </ul>
</li>

CSS:

.dropdown-areas {
    text-align: left;
    background-color: rgba(54, 52, 53, 0.9);
    padding: 10px 0;
    width: 100%;
    display: none;
    position: absolute;
}
.dropdown-areas li {
   padding: 10px 0 10px 20px;
   width: 100%;
   list-style-type: none;
}
.dropdown-areas li a {
    border-left: 3px solid var(--corFont);
    padding-left: 10px;
}

SCRIPT:

$(document).ready(function() {
    $('#showDropdown').hover(function() {
        $('.dropdown-areas').slideToggle(1000);
    });
});
1
  • 1
    Cara acho que vc vai ter que colocar um setTimeout() ai para evitar que a animação recomece antes de terminar ou se interrompa caso o usuário remova ou entre e saia rápido do menu algo assim... eu não manjo de jQuery então não consegui te ajudar muito nessa
    – hugocsl
    13/11/2018 às 13:05

2 Respostas 2

4

O método .hover dispara 2 eventos: mouseenter e mouseleave. Ao usar apenas 1 função no método, você executa o mesmo código (.slideToggle()) 2 vezes, o que causa bug, porque irá enfileirar a animação onde uma irá atropelar a outra.

Em vez disso, trate os eventos dentro do .hover de forma separada, cada um com a sua função:

$('#showDropdown').hover(
   function(){
      // AQUI TRATA O MOUSEENTER
   },
   function(){
      // AQUI TRATA O MOUSELEAVE
   }
);

Em vez de usar .slideToggle(), use .slideDown() no mouseenter e .slideUp() no mouseleave.

E para evitar ainda mais bugs, coloque ainda um if na primeira função verificando se o elemento está invisível antes de aplicar a animação que mostra o elemento.

Seu código ficaria assim:

$(document).ready(function() {
   $('#showDropdown').hover(
      function() {
         if(!$('.dropdown-areas').is(":visible"))
         $('.dropdown-areas').slideDown(1000);
      },
      function() {
         $('.dropdown-areas').slideUp(1000);
      }
   );
});
.dropdown-areas {
    text-align: left;
    background-color: rgba(54, 52, 53, 0.9);
    padding: 10px 0;
    width: 100%;
    display: none;
    position: absolute;
}
.dropdown-areas li {
   padding: 10px 0 10px 20px;
   width: 100%;
   list-style-type: none;
}
.dropdown-areas li a {
    border-left: 3px solid var(--corFont);
    padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="showDropdown" <?=$page=='areas.php' ? 'class="active"' : '';?>>
    <a class="areas" href="Javascript:void(0);">ÁREAS DE ATUAÇÃO</a>
    <ul class="dropdown-areas">
        <? while($row_rsAreas = mysql_fetch_assoc($rsArea)) { ?>
            <li>
                <a href="area.php?id=<?=$row_rsAreas['area_id'];?>"><?=$row_rsAreas['area_titulo'];?></a>
            </li>
        <? } ?>
    </ul>
</li>

Você também pode usar o método .stop() em cada função antes de aplicar o slide. Isso dispensa o uso do if na primeira função:

$(document).ready(function() {
   $('#showDropdown').hover(
      function() {
         $('.dropdown-areas').stop().slideDown(1000);
      },
      function() {
         $('.dropdown-areas').stop().slideUp(1000);
      }
   );
});
.dropdown-areas {
    text-align: left;
    background-color: rgba(54, 52, 53, 0.9);
    padding: 10px 0;
    width: 100%;
    display: none;
    position: absolute;
}
.dropdown-areas li {
   padding: 10px 0 10px 20px;
   width: 100%;
   list-style-type: none;
}
.dropdown-areas li a {
    border-left: 3px solid var(--corFont);
    padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="showDropdown" <?=$page=='areas.php' ? 'class="active"' : '';?>>
    <a class="areas" href="Javascript:void(0);">ÁREAS DE ATUAÇÃO</a>
    <ul class="dropdown-areas">
        <? while($row_rsAreas = mysql_fetch_assoc($rsArea)) { ?>
            <li>
                <a href="area.php?id=<?=$row_rsAreas['area_id'];?>"><?=$row_rsAreas['area_titulo'];?></a>
            </li>
        <? } ?>
    </ul>
</li>

Funcionamento em dispositivos mobile (touch screen)

Como esses dispositivos não detectam mouseenter, basta acrescentar um evento .click no elemento, desta vez com .slideToggle():

$('#showDropdown').click(function(){
   $('.dropdown-areas').slideToggle(1000);
});
7
  • 1
    Outro ponto interessante seria limpar a fila de animação daquele elemento com o método jQuery.stop(), senão as animações poderiam ocorrem mesmo depois do usuário já ter parado de interagir. Ficaria $('.dropdown-areas').stop().slideDown(600); e não precisaria do is.(':visible') (e o mesmo no slideUp) 13/11/2018 às 13:14
  • 1
    @fernandosavio obg pela dica. Vou acrescentar na resposta.
    – Meu ovo
    13/11/2018 às 13:25
  • 1
    Acabei criando uma resposta para complementar a sua (pois na minha só abordo o uso do stop). :D 13/11/2018 às 13:26
  • 1
    Mobile não tem mouseenter e mouseleave por motivos óbvios :D Teria que achar outro evento melhor, talvez touch. 13/11/2018 às 13:40
  • 1
    @aleque_b Adicionado na resposta. Abs!
    – Meu ovo
    13/11/2018 às 14:02
3

Você pode usar o método jQuery.stop() para cancelar a animação que já está acontecendo antes de recomeçar a nova animação.

Sem o stop, se o usuário fizer o hover várias vezes seguidas rapidamente, a animação continuará mesmo depois de o usuário deixar de interagir com o dropdown.

Faça o teste no código abaixo:

let dropdownAreas = $('.dropdown-areas');

$('#showDropdown').hover(
    function() {
       dropdownAreas.slideDown(500);
    },
    function() {
       dropdownAreas.slideUp(500);
    }
 );
.dropdown-areas {
    text-align: left;
    background-color: rgba(54, 52, 53, 0.9);
    padding: 10px 0;
    width: 100%;
    display: none;
    position: absolute;
}
.dropdown-areas li {
   padding: 10px 0 10px 20px;
   width: 100%;
   list-style-type: none;
}
.dropdown-areas li a {
    border-left: 3px solid var(--corFont);
    padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li id="showDropdown">
    <a class="areas" href="Javascript:void(0);">ÁREAS DE ATUAÇÃO</a>
    <ul class="dropdown-areas">
            <li><a href="area.php?id=1">Área 1</a></li>
            <li><a href="area.php?id=2">Área 2</a></li>
            <li><a href="area.php?id=3">Área 3</a></li>
    </ul>
</li>

Com o stop, cada animação cancela a animação anterior. Veja no snippet abaixo:

let dropdownAreas = $('.dropdown-areas');

$('#showDropdown').hover(
    function() {
       dropdownAreas.stop().slideDown(500);
    },
    function() {
       dropdownAreas.stop().slideUp(500);
    }
 );
.dropdown-areas {
    text-align: left;
    background-color: rgba(54, 52, 53, 0.9);
    padding: 10px 0;
    width: 100%;
    display: none;
    position: absolute;
}
.dropdown-areas li {
   padding: 10px 0 10px 20px;
   width: 100%;
   list-style-type: none;
}
.dropdown-areas li a {
    border-left: 3px solid var(--corFont);
    padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li id="showDropdown">
    <a class="areas" href="Javascript:void(0);">ÁREAS DE ATUAÇÃO</a>
    <ul class="dropdown-areas">
            <li><a href="area.php?id=1">Área 1</a></li>
            <li><a href="area.php?id=2">Área 2</a></li>
            <li><a href="area.php?id=3">Área 3</a></li>
    </ul>
</li>

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 .