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);
});