kali ini saya sedang coba-coba, dan saya rasa sendiri hasil pada tutorial ini belum lah baik, jadi masih perlu penambahan dan perbaikan namun semoga tutorial ini bisa membantu rekan-rekan yang sedang coba-coba juga :
pada markup dasarnya saya meramu seperti berikut :

<div class="wrapper">
<div class="content">
<div id="form_wrapper" class="form_wrapper">
<form class="daftar">
<h3>Daftar</h3>
<div class="column">
<div>
<label>Nama Depan:</label>
<input type="text" placeholder="Nama Depan" required />
<span class="error">Terjadi Ke Erroran</span>
</div>
<div>
<label>Nama Belakang:</label>
<input type="text" placeholder="Nama Belakang" required />
<span class="error">Terjadi Ke Erroran</span>
</div>
<div>
<label>Weblog/Website:</label>
<input type="text" value="http://" required/>
<span class="error">Terjadi Ke Erroran</span>
</div>
</div>
<div class="column">
<div>
<label>Username:</label>
<input type="text" placeholder="username" required/>
<span class="error">Terjadi Ke Erroran</span>
</div>
<div>
<label>Email:</label>
<input type="text" placeholder="Email" required/>
<span class="error">Terjadi Ke Erroran</span>
</div>
<div>
<label>Password:</label>
<input type="password" placeholder="Katakunci" required/>
<span class="error">Terjadi Ke Erroran</span>
</div>
</div>
<div class="bottom">
<div class="remember">
<input type="checkbox" />
<span>Kirimi Saya Update Terbaru</span>
</div>
<input type="submit" value="daftar" />
<a href="awalanmasuk.html" rel="masuk" class="linkform">Bila anda sudah mempunyai akun? masuk dari sini</a>
<div class="clear"></div>
</div>
</form>
<form class="masuk active">
<h3>Masuk</h3>
<div>
<label>Username:</label>
<input type="text" placeholder="Username" required/>
<span class="error">Terjadi Ke Erroran</span>
</div>
<div>
<label>Password: <a href="lupapassword.html" rel="lupa_katakunci" class="forgot linkform">Lupa dengan Password?</a></label>
<input type="password" placeholder="Katakunci" required />
<span class="error">Terjadi Ke Erroran</span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Biarkan Tetap Masuk</span></div>
<input type="submit" value="masuk"></input>
<a href="daftar.html" rel="daftar" class="linkform">Belum Mempunyai Akun? Daftar Disini</a>
<div class="clear"></div>
</div>
</form>
<form class="lupa_katakunci">
<h3>Lupa Password</h3>
<div>
<label> Masukan Email:</label>
<input type="text" placeholder="Masukan Email" required />
<span class="error">Terjadi Ke Erroran</span>
</div>
<div class="bottom">
<input type="submit" value="Ingatkan Saya"></input>
<a href="index.html" rel="masuk" class="linkform">Sudah Menjadi Anggota? Masuk Dari Sini</a>
<a href="daftar.html" rel="daftar" class="linkform">Belum Mempunyai Akun? Daftar Disini</a>
<div class="clear"></div>
</div>
</form>
</div>
<div class="clear"></div>
</div>
</div>


kemudian untuk CSS saya meramu seperti berikut :

dan untuk JavaScriptnya

<!-- The JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');

//get width and height of each form and store them for later
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});

//set width and height of wrapper (same of current form)
setWrapperWidth();

/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the 
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400,function(){
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm= $form_wrapper.children('form.'+target);
//animate the wrapper
$form_wrapper.stop()
.animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
},500,function(){
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});

function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}

/*
for the demo we disabled the submit buttons
if you submit the form, you need to check the 
which form was submited, and give the class active 
to the form you want to show
*/
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
});
});


Untuk File Lengkapnya silahkan Download File projectnya disini

Dengan hasil di Google Chrome dan Opera sebagai berikut :
halaman awalanmasuk.html