                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

大家帮我看一下错在哪里了？动画没效果啊

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery动画特效</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <style type="text/css">
        #one {
    position:absolute;
    left:200px;
    top:50px;
    width:80px;
    height:80px;
    border: solid 1px #ccc;
    margin: 0px 8px;
    background-color: Red;
    color:White;
    vertical-align:middle
           }  
    </style>
    </head>
    
    <body>
    <input id = "left" type = "button" value = "左移" />
    <input id = "right" type = "button" value = "右移" />
    <div id = "one">hahahaha</div>
    <script> 
        $(function(){
            $("#left").click(function(){
                $("div").animate({
                    right:'50px'
                },3000)    
            })
            $("#right").click(function(){
                $("div").animate({
                    left:'50px'
                },3000)    
            })
            })
    </script>
    
    </body>
</html>