Ir para o conteúdo
DevilRocks92

[Resolvido]Popup - alterar form's jquery effect

Mensagens Recomendadas

DevilRocks92    0
DevilRocks92

Boas,

eu tenho este popup com um form Login (e um form de registo comentado):

<div id="login" style="float:right; width:15%; padding-top:3px;">
   <a href="#" class="topopup">LOGIN | REGISTAR</a>

   <div id="toPopup">
	<div class="close"></div>
	<div id="popup_content"> <!--your content start-->
	 <h2>Login</h2>
	 <form id="login">
	  <table cellpadding="3" cellspacing="2">
	   <tr>
		<td>
		 Username:
		</td>
		<td>
		 <input type="text" name="username" id="username" />
		</td>
	   </tr>

	   <tr height="10px"></tr>

	   <tr>
		<td>
		 Password:
		</td>
		<td>
		 <input type="password" name="password" id="password" />
		 <br/>
		 <span style="font-size:10px;"><a href="">Esqueceu-se da password?</a></span>
		</td>
	   </tr>
	   <tr>
		<td>

		</td>
		<td style="text-align:left;">
		 <input type="submit" name="login" id="login" />
		 <span style="font-size:12px;"><a href="">Ainda não está inscrito?</a></span>
		</td>
	   </tr>
	  </table>
	 </form>

	 <!--
	 <form id="register">
	  <table cellpadding="3" cellspacing="2">
	   <tr>
		<td>
		 Username:
		</td>
		<td>
		 <input type="text" name="username" id="username" />
		</td>
	   </tr>

	   <tr height="10px"></tr>

	   <tr>
		<td>
		 Password:
		</td>
		<td>
		 <input type="password" name="password" id="password" />
		 <br/>
		 <span style="font-size:10px;"><a href="#">Esqueceu-se da password?</a></span>
		</td>
	   </tr>
	   <tr>
		<td>

		</td>
		<td style="text-align:left;">
		 <input type="submit" name="login" id="login" />
		 <span style="font-size:12px;"><a href="#register">Ainda não está inscrito?</a></span>
		</td>
	   </tr>
	  </table>
	 </form>
	 -->
	</div> <!--your content end-->
   </div> <!--toPopup end-->
   <div class="loader"></div>
   <div id="backgroundPopup"></div>
  </div>

O que eu quero é mudar de formulário com um efeito ao clickar no anchor link

<span style="font-size:12px;"><a href="#register">Ainda não está inscrito?</a></span>

como neste exemplo: http://tympanus.net/Tutorials/AnimatedFormSwitching/

Será que me podem ajudar?

Obrigado.

Editado por DevilRocks92

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
malleus    0
malleus

Uma das hipóteses poderia ser:

1) descomentar o formulário de registo mas escondê-lo

<form id="register" style="display: none;">

2) mostrar o formulário de registo onclick:

$(...selector para o botão de registo...).on({
  click: function() {
  $('#login').hide();
  $('#register').show();
  }
}, null);

Se quiseres animações tens o animate, que podes usar em vez dos shows/hides e usar propriedades css (opacity, width, height, etc) para implementares o efeito desejado.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.