1

Pode parecer clichê, mas não encontrei e nem consegui adaptar nenhum código aqui do site as minhas necessidades. Peço desculpas se for redundância de conteudo, mas futuramente pode ajudar outras pessoas.

Como eu posso estar adicionando um efeito de FadeIn e FadeOut ao abrir e fechar o elemento, com base no seguinte script javascript:

Da seguinte forma está funcionando, mas sem o simples efeito de abrir.

OBS: também gostaria de saber se é possivel que, ao clicar no mesmo button, fechasse a DIV com um FadeOut.

HTML:

 <button type="button onclick="Mudarestado('formulario')">Abrir div</button>

Javascript:

   function Mudarestado(el) {
        var display = document.getElementById(el).style.display;

        if(display == "none")
            document.getElementById(el).style.display = 'block';
        else
            document.getElementById(el).style.display = 'none';
    } 
3
  • Há mais que uma div que queres abrir? cada uma com seu botão? podes colocar o HTML dessa div também? são elementos próximos ou em sitios diferentes do DOM?
    – Sergio
    Commented 18/12/2015 às 19:37
  • É uma unica DIV, eu só quero abri-la e fecha-la ao clicar no button. Tudo ocorre no mesmo documento, o button em cima e logo em seguida a div. OBS: a div está com display:none no CSS.
    – Cobra
    Commented 18/12/2015 às 19:39
  • Sim. Não sei se reparou no inicio da pergunta, mas ja faz um tempo que estou tentando adaptar as soluções que encontrei e não consegui. Ficaria grato caso encontrasse alguma solução agora.
    – Cobra
    Commented 18/12/2015 às 19:44

1 Resposta 1

3

Para teres um efeito de fade não podes ter display: none; pois o CSS não faz transição de display. Sugiro que faças isso com uma classe de CSS, onde mudas a opacidade e escolhes a velocidade da animação.

Podes fazer assim:

function Mudarestado(el) {
    document.getElementById(el).classList.toggle('mostrar');
}

e no CSS defines a animação:

#formulario {
    opacity: 0;
    transition: opacity .5s;
}
#formulario.mostrar {
    opacity: 1;
}

Exemplo: https://jsfiddle.net/fyf4nsk4/

Se quiseres em vez de usar fade podes fazer uma transição com slide. Tudo com CSS...

3
  • Quase perfeito! me deparei com um problema: com o opacity, o bloco ainda ocupa o espaço. Como eu tinha dito, o display:none não ocupava espaço, apenas quando fosse chamado.. Como agir?
    – Cobra
    Commented 18/12/2015 às 19:56
  • @ThiagoBarros por isso eu referí que não podes usar o display: none;. E por isso usar o opacity é melhor, pois além de permitir transições sabes como ele vai ficar na página. Se queres evitar esse comportamento podes sempre usar position:absolute; para não ter o elemento como bloco. Exemplo -> jsfiddle.net/Sergio_fiddle/fyf4nsk4/3
    – Sergio
    Commented 18/12/2015 às 20:03
  • A resposta é valida e de muita utilidade. Obrigado!
    – Cobra
    Commented 18/12/2015 às 20:08

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 .