Ir para conteúdo
Fórum Script Brasil
  • 0

Efeito slideToggle do jQuery em js puro


vini_loock

Pergunta

2 respostass a esta questão

Posts Recomendados

  • 0

Já implementei isso num mini-framework que estava criando. Segue o código abaixo (adaptado):

<html>
<head>
    <title>Teste</title>
    <script type="text/javascript">
        //Função que será utilizada para a animação
        var mostra = function (element, tempo) {
            //Função que converte um valor no formato "125px" para 125
            var heightToInt = function (height) {
                return new parseInt(height.replace("px", ""))
            }
            //Variáveis
            var height_total = heightToInt(element.style.height);
            var height = 0
            var fator = tempo / height_total
            lasttime = new Date().getTime()
            //Muda o tamanho do elemento para zero
            element.style.height = 0
            //...
            var intervalo = setInterval(function () {
                //Intervalo de tempo
                var deltaTime = (lasttime - (lasttime = new Date().getTime())) * (-1)
                //Nova altura
                height += deltaTime / fator
                //Verifica se terminou
                if (height >= height_total) {
                    element.style.height = height_total + "px"
                    clearInterval(intervalo)
                    return;
                }
                //Efetua as alterações
                element.style.height = height + "px";
            }, 1000 / 60);
        }
        onload = function () {
            mostra(document.getElementById("minhaDiv"),1000)
        }
    </script>
</head>
<body>
    <div id="minhaDiv" style="background-color:Red; width:200; height:400">aew</div>
</body>
</html>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...