漂亮的层的过渡效果，在线等！

网址：http://down.chinavisual.com/app/site/auth/login  （放心，这个是视觉中国下载吧，不是什么病毒网址哈。）
此时你点那个 【快速注册】，那个JS+div的滑动效果那个有？我研究了他的JS代码，实在太难抠了。

解决方案 »

  1.   

    http://static.xiaba.cvimage.cn/js/bundle_1.0.0b05192_xiaba.js
    //相关的代码段
    $("#show_register_box").click(function(){$("#item_login").hide("slide",{direction:"right"});$("#item_register").show("slide",{direction:"left"});return false});$("#quick_switch_login").live("click",function(){$("#show_login_box").click();return false});用的就是jQuery的ui/Effects/Slide特效：
    http://docs.jquery.com/UI/Effects/Slide
      

  2.   

    这个效果确实不错，写了个例子，不好，抛砖引玉下，等待高手的完美答案，算是做个标记吧！<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
      <script type="text/javascript">
    $(function(){
    $("#ql").click(function(){
    $("#regis").animate( { left: '10%' } , 1000 )
    $("#login").animate( { left: '-100%' } , 1000 )
    }) $("#qr").click(function(){
    $("#regis").animate( { left: '100%' } , 1000 )
    $("#login").animate( { left: '10%' } , 1000 )
    })
    })
      </script>
      <style type="text/css">
    #main{
    width:100%;
    height:900px;
    overflow:hidden;
    }

    #login{
    width:90%;
    float:left;
    margin:20px;
    height:200px;
    position:absolute;
    top:10%;
    left:10%;
    background-color:blue;
    } #regis{
    width:90%;
    height:200px;
    float:right;
    position:absolute;
    top:10%;
    left:100%;
    margin:20px;
    background-color:green;
    }
      </style>
     </HEAD> <BODY>
      <div id="main">
    <div id="regis">
    <a href="#" id="qr" style="color:red">快速注册</a>
    </div>
    <div id="login">
    <a href="#" id="ql" style="color:red">快速登录</a>
    </div>
      </div>
     </BODY>
    </HTML>