Situação:
- Tenho um menu, e preciso que quando ocorra um evento de
hover
, ele exiba uma série de informações do respectivo menu - Quando o mouse for para outro menu, as informações exibidas tem que ser escondidas e mostrar as informações do outro menu.
Problema:
- Quando eu passo o mouse rapidamente nos links do menu, as vezes ele acaba bugando, exibindo o conteúdo de 2 menus ou mais (que não deu tempo de esconder)
Aqui está o JSFiddle
Segue abaixo o código que estou usando:
HTML:
<ul class="megamenu">
<li>
<a href="#" data-id="sbc_1">Teste</a>
</li>
<li>
<a href="#" data-id="sbc_2">Teste2</a>
</li>
<li>
<a href="#" data-id="sbc_3">Teste3</a>
</li>
<li>
<a href="#" data-id="sbc_4">Teste4</a>
</li>
</ul>
JS:
$(function(){
var id;
$('.megamenu a').mouseenter(function()
{
id = '#megamenuContent #'+$(this).data("id");
$(id).fadeIn('slow');
})
.mouseleave(function()
{
$(id).hide();
});
});
Gostaria de saber se alguém tem alguma sugestão ou alguma solução para este problema, em um último caso eu acabarei optando por utilizar o evento click
, mas o ideal para o meu caso eh utilizar o hover
.