• 动感十足,jquery制作带动画切换的表单
  • 标签 : 动感 jquery 菜单    来源 : 33
  • $(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();
     });
    });