3

Opa galera tenho uma div que é meu cabeçalho do site, quero esconder ele ao clicar em um botão e fazer ele aparecer ao clicar em outro botão. Consigo fazer esconder e a movimentação está do jeito que quero, contudo na hora de fazer aparecer de volta não apresenta a mesma fluidez e a imagem não fica na tela, sumindo ao final.

function myMove() {
    var elem = document.getElementById("box-toogle"); 
    var pos = 0;
	var t = 0;
	var id = setInterval(frame, 5);
    function frame() {
        if (pos == 160) {
            clearInterval(id);
        } else {
            pos--; 
            elem.style.top = pos + 'px'; 
				t++;
        }
}

function myMove1() {
    var elem = document.getElementById("box-toogle"); 
    var pos = 150;
	var t = 0;
	var id = setInterval(frame, 5);
    function frame() {
        if (pos == 0) {
            clearInterval(id);
        } else {
            pos--; 
            elem.style.top = pos + 'px'; 
				t++;
        }
}
#box-toogle {
	width: 100%;
    height: 150px;
    position: relative;
}
<html>
  <head>
  </head>
<body>
<header id="box-toogle">texto</header>
 </body>
</html>

Sou iniciante em javascript, se puderem me ajudar agradeço

3
  • olhando o seu código, os métodos myMove e myMove1 não tem a ultima } para encerrar o método, faça a correção e teste novamente. 29/05/2016 às 5:35
  • As suas funções não estão fechadas, cada uma falta um chaves no final. Aconselho utilizar uma boa IDE para programar, a qual faz highlight nos códigos e ajuda a visualização e percepção destes erros básicos, Netbeans é uma delas. 29/05/2016 às 6:29
  • Opa me desculpem na hora de copiar e colar acabei esquecendo a ultima chave, no meu código está fechado certinho e continua não fluido, alterarei o código aqui colado para ficar de acordo. aguardo o parecer de vocês obrigado. 29/05/2016 às 14:42

1 Resposta 1

2

Este tipo de animações devem ser feitas com CSS.

Nesse caso só precisas de

#box-toogle {
    // ...

    top: 0px;
    transition: top 1s;
}

#box-toogle.escondido {
    top: -100px;
}

e quando o elemento for clicado adicionas ou removes essa classe escondido.

Exemplo:

var header = document.getElementById('box-toogle');
header.addEventListener('click', function() {
    this.classList.toggle('escondido');
});
#box-toogle {
    width: 100%;
    height: 150px;
	border: 2px #ddf solid;
	font-size: 80px;
	
	top: 0px;
    position: relative;
    transition: top 1s;
}

#box-toogle.escondido {
    top: -100px;
}
<header id="box-toogle">texto</header>

jsFiddle: https://jsfiddle.net/zdt1vced/

5
  • Sergio muito obrigado, não sei se é uma dúvida de novato mas não consigo fazer funcionar o código que me passaste no jsFiddle executa tranquilamente, agora quando passo para o notepad e executo no navegador o mesmo não acontece, copiei e colei igual me passaste preciso fazer + alguma alteração? Outra coisa sabes me dizer pq não é recomendado fazer efeitos assim apenas no js?, obrigado imensamente. 29/05/2016 às 15:14
  • @VeteranoKuno1 sobre CSS vs JS dá uma olhada aqui: pt.stackoverflow.com/q/51542/129
    – Sergio
    29/05/2016 às 15:19
  • @VeteranoKuno1 em relação a não funcionar na tua página, coloca o JavaScript no final da página. Se não funcionar coloca aqui um pastebin com a página toda.
    – Sergio
    29/05/2016 às 15:20
  • Sérgio realmente colocando no final da página funcionou, não entendi pq não funcionou em um js externo. Amolando você um pouquinho + e com preguiça de pesquisar aqui no fórum qual livro você recomenda, estou usando o codeAcademy para aprender o básico + já sinto necessidade de outras alternativas, abraço e muito obrigado, mesmo! 29/05/2016 às 15:54
  • 1
    @VeteranoKuno1 ainda bem que funcionou. Se quiseres podes marcar a resposta como aceite. Estás a precisar de uma função onload para o código só correr quando a página carrega. Se colocares o teu código dentro de window.onload = function () { ... }; já deve funcionar num fcheiro externo também. Ou então coloca a tag <script> no final do body.
    – Sergio
    29/05/2016 às 15:58

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 .