                        课程
                    
                        /前端开发
                        
                            /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>
        div{position:relative;
            width:80px;
      height:80px;
      border: solid 1px #ccc;
      margin: 10px 8px;
      background-color: Red;
      color:White;
      vertical-align:middle}
        </style>
        <script>
   $(function(){
    $("#btn1").bind("click",function(){
     $("div").animate({
     left:"-=50px"
     },3000
     )
    });
    $("#btn2").bind("click",function(){
     $("div").animate({
     left:"+=50px"
     },3000
     )
    });
   })
        </script>
    </head>
    
    <body>
        <div></div>
        <input id="btn1" type="button" value="左移" />
        <input id="btn2" type="button" value="右移" />
    </body>
</html>