Javascript Como fazer efeito de deslize de um pop up ou div em javascript?

[Maurício Machado]

Olá estou fazendo uma rede social e preciso fazer uma especie de pop up ou div escondida, que abra o formulário de cadastro e que  venha deslizando da esquerda para direita, quando eu clicar no "cadastrar". O que seria melhor eu fazer também, criar um botão e mudar as propriedades dele para deixa-lo ancorado no local ou crio um label e coloco uma especie de oneClick ?

OBS: sou iniciante em javascript rsrs.

[DiF]

@Maurício Machado Olá,

 

O que você quer fazer, é mover um elemento de ponto X ao ponto Y ao clicar em um elemento certo?

Bom, existem diversas formas de fazer. Seja com plugins jQuery já prontos ou você mesmo fazer pela função animate.

 

Supondo que temos um html assim:

<a href="#" class="reg">Registrar</a>
<div class="box">
  <div class="close"></div>
     <p>Seu formulário de registro aqui</p>
</div>

Aqui temos um elemento de link com uma classe chamada "reg".

Temos um elemento DIV chamado box. Ele servirá de conteiner para o formulário.

Um elemento DIV chamado close, para esconder o formulário. 

 

Bueno, a magia da coisa é o jQuery.

Importe ele antes no seu html depois o código:

$(document).ready(function(){
   $(".reg").on('click', function(e){  
   		e.preventDefault();
   		$( ".box" ).stop().animate({ left: "0" }, 500 );
   });
   
   $(".close").on('click', function(e){  
   		e.preventDefault();
   		$( ".box" ).stop().animate({ left: "-315px" }, 500 );
   });
    
});

Basicamente, o primeiro é  o evento de puxar para direita o elemento escondido.

e o segundo é o inverso.

 

Simples assim!

 

Veja funcionando:  https://jsfiddle.net/dife/gj0b4b9p/