se seletores encadeamento?
-
06-07-2019 - |
Pergunta
ok, estou tentando animar algo a diferentes alturas se um id selecionado tem uma classe selecionada. Eu tenho o seguinte código.
function myfunction() {
if ($('#homebutton').hasClass("active"));
{
$('#content').animate({height: "240px",opacity: 1}, 100 , hideLoader());
}
if ($('#showbutton').hasClass("active"));
{
$('#content').animate({height: "79px",opacity: 1}, 200 , hideLoader());
}
if ($('#aboutbutton').hasClass("active"));
{
$('#content').animate({height: "527px",opacity: 1}, 300 , hideLoader());}
if ($('#contactbutton').hasClass("active"));
{
$('#content').animate({height: "1040px",opacity: 1}, 400 , hideLoader());
}
}
que é encadeamento as animações após o outro não importa o que eu clicar ele acaba sendo 1040px alta o que estou fazendo de errado ??
tentou mudá-lo para
{if ($('#homebutton').hasClass("active"));
$('#content').animate({height: "240px",opacity: 1}, 100 , hideLoader());
}
com absolutamente nenhum efeito
Solução
Você separou a se declarações do código na linha seguinte. A única coisa que você executa quando a condição é verdadeira é uma declaração vazia.
Alterar esta:
if ($('#homebutton').hasClass("active"));
em:
if ($('#homebutton').hasClass("active"))
e o mesmo para os outros três.
Outras dicas
Você pode limpar isso um monte tirando proveito da linguagem agradável que o Javascript é:
$.each({
'#homebutton': { height: '240px', speed: 100 },
'#showbutton': { height: '79px', speed: 200 },
'#aboutbutton': { height: '527px', speed: 300 },
'#contactbutton': { height: '1040px', speed: 400 }
}, function(selector, controls) {
if ($(selector).hasClass('active'))
$('#content').animate({height: controls.height, opacity: 1}, controls.speed, hideLoader());
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow