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

jQuery（animate）动画特效

<!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>
    </head>
    
    <body>
        <input id="Button1" type="button" value="向左" /><input id="Button2" type="button" value="向右" /><input id="Button3" type="button" value="向上" /><input id="Button4" type="button" value="向下" />
    <div id="div1" style="position:absolute;background:red;height:50px;width:100px;margin-top:50px;"></div>
    <p style="border:1px solid #ddd;padding:10px;"></p>

    <script>
        $(function () {
            $("#Button1").bind("click", function () {
                $("#div1").animate({ left: "-=50px" }, 3000, function () {
                    $("p").html("向左移动了50px！");
                    $("p").css("color", "pink");
                });
            });
            $("#Button2").bind("click", function () {
                $("#div1").animate({ left: "+=50px" }, 3000, function () {
                    $("p").html("向右移动了50px！");
                    $("p").css("color","red");
                });
            });
            $("#Button3").bind("click", function () {
                $("#div1").animate({ top: "-=50px" }, 3000, function () {
                    $("p").html("向上移动了50px！");
                    $("p").css("color", "blue");
                });
            });
            $("#Button4").bind("click", function () {
                $("#div1").animate({ top: "+=50px" }, 3000,function () {
                    $("p").html("向下移动了50px！");
                    $("p").css("color", "gray");
                });
            });
        });
    </script>
    </body>
</html>