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

效果显示不全

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery动画特效</title>
        <style type="text/css">
            div{
                background-color:red;
                width:100px;
                height:100px;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>

    <body>
            <div></div>
            <input type="button" id="left" value="左移">
            <input type="button" id="right" value="右移">
            <script type="text/javascript">
               $(function(){
                   $("#left").bind("click",function(){
                           $("div").animate({
                            left:"-=50px"
                        },500,function(){
                            $(this).html("我左移了") ;
                        })
                   });
                   $("#right").bind("click",function(){
                        $("div").animate({
                           left:"+=50px"
                        },500,function(){
                            $(this).html("我右移了");
                        })
                   });
               });
            </script>
    </body>
</html>