7

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.

1
  • 1
    Não use mouseenter pois seu site não vai ficar bacana num touchscreen.
    – NaN
    14/02/2014 às 1:10

2 Respostas 2

3

Resposta:

Seu problema é pelo fato das animações não terem tempo suficiente para terminar antes que você inicie outra.

Solução:

Você pode utilizar o evento .stop() com o intuito de parar propagação da animação antes de iniciar outra, que no caso seria recomendado no momento exato antes de iniciar uma nova animação você parar a mesma.

Em seu código a aplicação desta função poderia ser feita desta forma:

$(function(){
    var id;

    $('.megamenu a').mouseenter(function()
    {
        id = '#megamenuContent #'+$(this).data("id");
        $(id).stop().fadeIn('slow'); //note que aqui eu adicionei a função .stop() para parar a propagação, logo antes do início do efeito.
    })
    .mouseleave(function()
    {
        $(id).hide();
    });
});

Explicação:

Bem esse tipo de problema é comum em animações, pois elas duram um certo tempo pré determinado por você. Qualquer tipo de animação deve ser visto como você pode trata-la para que nunca ocorra uma sobreposição de animações, dessa forma acontecendo o seu problema, por isso parar animações decorrentes com certeza é a melhor forma de resolver isto.

Exemplo funcionando no JSFiddle

2
  • Era exatamente isto, muito obrigado mesmo. Eu imaginei que o problema era a animação, mas não fazia ideia de como arrumar isto. Fiz o que você disse, e entendi a explicação, valeu mesmo =D 14/02/2014 às 0:15
  • 1
    Disponha. Estou aqui pra isso :} 14/02/2014 às 0:36
3

Adicione a função stop antes da função fadeIn ficando assim: $(id).stop().fadeIn('slow')

1
  • 2
    Funciona! Porém, daria pra elaborar um pouco mais a resposta para não ficar algo tão seco?
    – utluiz
    13/02/2014 às 18:07

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 .