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

只要向右移动过，就不会向左移动了，这是怎么回事啊？

<!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>
        <title>7.13编程练习:jQuery动画特效</title>
        <meta charset=utf-8>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <style type="text/css">
        div{
            position: relative;
            margin:0 auto;
            width:600px;
        }
        </style>
    </head>

    <body>
        <h3>左移和右移</h3>
        <div>
            <img src="http://pic.miercn.com/uploads/allimg/150824/104-150R4135319.jpg" alt="" / >
        </div>
        <input id="btnLeft" type="button" value="左移" />
        <input id="btnRight" type="button" value="右移" />
        <span id="tip"></span>
        <script type="text/javascript">
        $(function () {
            $("#btnLeft").bind("click",function () {
                $("div").animate({
                    right: "+=50px"},1000,function () {
                        $("#tip").html("左移完成！")
                    });
            });
            $("#btnRight").bind("click", function() {
                $("div").animate({
                    left: "+=50px"},1000,function () {
                        $("#tip").html("右移完成！")
                    });
            });
        });
        </script>

    </body>
</html>