Menu fade in fade out

[Allan Carlos dos Santos G 0]

Fala galera estou com um pequeno problema, porem incomoda, fiz um menu que em um dos botões quando eu clico abre uma lista de botões logo abaixo fade in e quando eu clico novamente ele some fade out, tudo muito bonito poreeemmm quando eu dou um duploclick em outro botão acima a tabela abre e fecha rapidamente, alguem ja passou por isso? sabem como resolver?

[Rafael Sirotheau 43]

Adiciona .stop() antes dos fadeIn/fadeOut. Algo assim:

$(seletor).stop().fadeIn(300);
//ou
$(seletor).stop().fadeOut(300);

[Allan Carlos dos Santos G 0]

esta assim: $("#div1, #div2, #div3 ").fadeToggle();

 

eu ponho assim? $("#div1, #div2, #div3 ").stop().fadeToggle();

 

isso?

[Rafael Sirotheau 43]

Isso!

Só explicando... Quando fazes uma chamada ao fadeIn/Out/Toggle, as animações entram em uma fila gerenciada pelo jQuery... Sendo assim, se chamares, por exemplo, o fadeToggle duas vezes seguidas, ele vai chamar a primeira vez e, então, colocar a segunda vez na fila, sendo chamada quando a primeira animação terminar.

O .stop() faz com que qualquer animação que esteja rodando ou na fila sejam interrompidas/removidas, evitando que ocorra o que você relatou.

[Allan Carlos dos Santos G 0]

não funcionou

da uma olhada na função:

<script>

$(document).ready(function(){

$("#regioes-comerciais, #materiais, #servicos-a-clientes, #velocidade-de-acesso, #statusos, #meios-de-transporte, #layout-de-faturamento, #periodos-de-faturamento, #tipos-de-pagamento, #vencimentos, #cidades, #bancos-de-cobranca, #prestadores-de-servico, #servidores, #emails-padronizados, #promocoes-e-campanhas, #estados, #enlance, #escolaridade, #subservicos, #planos-de-acesso, #precos, #motivos-de-atendimento, #motivos-de-cancelamento, #equipamentos, #info-diagnostico ").stop().fadeOut(500);

$("#tab").click(function(){

$("#regioes-comerciais, #materiais, #servicos-a-clientes, #velocidade-de-acesso, #statusos, #meios-de-transporte, #layout-de-faturamento, #periodos-de-faturamento, #tipos-de-pagamento, #vencimentos, #cidades, #bancos-de-cobranca, #prestadores-de-servico, #servidores, #emails-padronizados, #promocoes-e-campanhas, #estados, #enlance, #escolaridade, #subservicos, #planos-de-acesso, #precos, #motivos-de-atendimento, #motivos-de-cancelamento, #equipamentos, #info-diagnostico ").stop().fadeToggle();

});

});

</script>

eu percebo que é no momento em que a página acaba de carregar que mostra o menu completo e depois volta...

[Rafael Sirotheau 43]

Como esta seu HTML nessa parte? Fica melhor pra entender... Recomendo a você adicionar uma classe a esses elementos que estás selecionando através de ID pra melhorar seu código. Por ex, adicione uma classe "tab-item" a todos esses elementos e podes chama-los simplesmente por $(".tab-item") ao invés de utilizar vários IDs.


Fiz um jsfiddle bem básico pra mostrar a diferenca entre o fade com e sem o .stop() (Se clicar rapidamente no mesmo item, percebe-se a diferença)

http://jsfiddle.net/0acycd0z/


Até pra eu saber se entendi bem seu problema mesmo

[Allan Carlos dos Santos G 0]

Classe não dar pra usar não, ja tem algumas, estava pensando em usar o display none e display block, usando o css no javascript pro bloco esta esta bloqueado quando a página carregar, o problema é que quando a página carrega ela carrega o bloco e rapidamente aplica o fadeout, com o css acho que ja vai carregar bloqueado, o que acha?

fiz aqui e funcionou, não da aquele efeito, mas funciona bem, sem bugs...vlwwww