[Resolvido]Popup - alterar form's jquery effect

[DevilRocks92 0]

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.

Edited May 17, 2013 by DevilRocks92

[malleus 0]

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.