$(function() {
    
                //表单区域（包括所有表单）
var $form_wrapper= $('#form_wrapper'),
  
                    //当前显示的表单以class名为 actvie 显示
$currentForm= $form_wrapper.children('form.active'),
//更改链接
$linkform= $form_wrapper.find('.linkform');
  
                //获取每个表单的宽度和高度并且保存供以后用
$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()
});
});
  
setWrapperWidth();
/*
  
                点击表单里的链接（改变表单事件），是当前表单隐藏。
                容器促使它的宽度和高度动态地适应新的表单的尺寸。
                动画过后，新的表单显示出来。
*/
$linkform.bind('click',function(e){
var $link= $(this);
var target= $link.attr('rel');
$currentForm.fadeOut(400,function(){
    //remove class active from current form
                        //移除当前表单的 active 类
$currentForm.removeClass('active');
// 新的表单
$currentForm= $form_wrapper.children('form.'+target);
//使容器动起来
$form_wrapper.stop()
 .animate({
width: $currentForm.data('width') + 'px',
height: $currentForm.data('height') + 'px'
 },500,function(){
       
                                         //新的表单的样式赋予 active
$currentForm.addClass('active');
    
                                         //展示新的表单
$currentForm.fadeIn(400);
 });
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width: $currentForm.data('width') + 'px',
height: $currentForm.data('height') + 'px'
});
}
/*
  
                本实例禁止了表单按钮的提交
                如果你想提交表单，你必须去检查哪个表单需要被提交，并且让该表单处于激活状态以显示出来。
*/
$form_wrapper.find('input[type="submit"]')
 .click(function(e){
e.preventDefault();
 });
});