仿土豆网右下角悬浮导航效果，但有问题


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿土豆网右下角悬浮导航效果</title>
<style type="text/css">
        *{ margin:0; padding:0;}
        .wrapper{ position:relative; width:200px; height:250px; margin:300px auto;}
        #Btn{ position:absolute; right:0; z-index:5; width:30px; height:50px; background:#e63a8c; cursor:pointer;}
        #Box1{ display:none; position:absolute; right:0; width:200px; height:50px; background:#e6e6ce;}
        #Box2{ display:none; position:absolute;right:0px;width:200px;height:200px;background:#f8c9b7;top: -200px;}
        #X{ position:absolute; right:0; top:0; width:20px; height:20px; color:#848450; font-weight:bold; cursor:pointer; font-family:Arial; text-align:center; line-height:20px;}
</style>
</head><body>
<div class="wrapper">
    <div id="Btn"></div>
    <div id="Box1"></div>
    <div id="Box2">
            <div id="X">X</div>
    </div>
</div>
<script type="text/javascript">
        var Btn=document.getElementById("Btn");
        var Box1=document.getElementById("Box1");
        var Box2=document.getElementById("Box2");
        var X=document.getElementById("X");
        Btn.onclick=function(){
                Box1.style.display="block";
                if(Box1.style.display="block"){
                        setTimeout("show()",200);
                }
        }
        function show(){
                if(Box1.style.display="block"){
                        Box2.style.display="block";
                }
        }
        X.onclick=function(){
                Box2.style.display="none";
                setTimeout("out()",200);
        }
        function out(){
                Box1.style.display="none";
        }
</script>
</body>
</html>
求人指导，如何能让效果更细腻一些。比如Box1、Box2现显示和隐藏的时候有动画过程，这种要怎么做呢？