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

我的代码能动，可为什么到最左端时再点左移，元素尺寸会减少，变型？？

<!DOCTYPE html>
<html>
<style type="text/css">
    div{
        position:relative;
        height:100px;
        width:100px;
        top:30px;
        left:30px;
        background-color:red;
        }
    input{ margin-top: 150px;
            }
</style>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <title>jQuery动画特效</title>
    </head>
    
    <body>
       <div></div> 
       <input id="left" type="button" value="左移"></input>
       <input id="right" type="button" value="右移"></input>
    </body>
    
     <script type="text/javascript">
    $(function(){
         $("#left").bind("click",function(){
              $("div").animate(
                  {left: "-=50px"
                },1000)});
                
           $("#right").bind("click",function(){
              $("div").animate(
                  {left: "+=50px"
                },1000)});    
                 
         }) ;  
    
   
    
    </script>
</html>

以上是我写的代码，让一个DIV方块移动。可以复制到上边运行一下能动是能动，可为什么到最左端或者右端时再点左/右移，元素尺寸会减少，变型？？这个animate()里写的{left:"+=50px}"的含义是改变DIV元素某一个边距离起始位置的坐标吗？

如何能让我的DIV小块移动到最、左右时再点移动按钮不会变化形状？设置一个if判断吗？