小小动画

<script src="JS/jquery-1.7.2.min.js"></script>

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #dw {
            position: absolute;
            width: 200px;
            height: 70px;
            font-family: 迷你简书魂;
            font-size: 50px;
        }

        #zhezhao {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            background-color: black;
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            opacity: 0.5;
        }

        #qiu1,#qiu2,#qiu3,#qiu4,#qiu5,#qiu6,#qiu7,#qiu8,#qiu9,#qiu10 {
            position: absolute;
            top: -100px;
            width: 30px;
            height: 30px;
            background-color: red;
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius: 15px;
        }
    </style>
    <script>


        $(document).ready(function () {
            $("#dw").click(function () {
                var idzz = $("#zhezhao").attr("id");
                idzz = "#" + idzz;
                var idqiu1 = $("#qiu1").attr("id");
                idqiu1 = "#" + idqiu1;

                var idqiu2 = $("#qiu2").attr("id");
                idqiu2 = "#" + idqiu2;

                var idqiu3 = $("#qiu3").attr("id");
                idqiu3 = "#" + idqiu3;

                var idqiu4 = $("#qiu4").attr("id");
                idqiu4 = "#" + idqiu4;

                var idqiu5 = $("#qiu5").attr("id");
                idqiu5 = "#" + idqiu5;

                var idqiu6 = $("#qiu6").attr("id");
                idqiu6 = "#" + idqiu6;

                var idqiu7 = $("#qiu7").attr("id");
                idqiu7 = "#" + idqiu7;

                var idqiu8 = $("#qiu8").attr("id");
                idqiu8 = "#" + idqiu8;

                var idqiu9 = $("#qiu9").attr("id");
                idqiu9 = "#" + idqiu9;

                var idqiu10 = $("#qiu10").attr("id");
                idqiu10 = "#" + idqiu10;

                aa(idzz, idqiu1, 130);
                aa(idzz, idqiu2, 120);
                aa(idzz, idqiu3, 110);
                aa(idzz, idqiu4, 130);
                aa(idzz, idqiu5, 120);
                aa(idzz, idqiu1, 110);
                aa(idzz, idqiu2, 130);
                aa(idzz, idqiu3, 120);
                aa(idzz, idqiu4, 110);
                aa(idzz, idqiu5, 130);

                $("#zhezhao").click(function () {
                    $(this).css("display", "none");
                });

            });
        });

        function aa(idzz, idqiu, time) {
            $(idzz).css("display", "block");
            $(idqiu).animate({ top: "600px" }, time, function () {
                $(idqiu).css("background-color", "aqua");
            }).animate({ top: "0px", left: "50px" }, time, function () {
                $(idqiu).css("background-color", "yellow");
            }).animate({ top: "580px", left: "100px" }, time, function () {
                $(idqiu).css("background-color", "blue");
            }).animate({ top: "20px", left: "150px" }, time, function () {
                $(idqiu).css("background-color", "green");
            }).animate({ top: "560px", left: "200px" }, time, function () {
                $(idqiu).css("background-color", "red");
            }).animate({ top: "40px", left: "250px" }, time, function () {
                $(idqiu).css("background-color", "indigo");
            }).animate({ top: "520px", left: "300px" }, time, function () {
                $(idqiu).css("background-color", "violet ");
            }).animate({ top: "60px", left: "350px" }, time, function () {
                $(idqiu).css("background-color", "aqua ");
            }).animate({ top: "500px", left: "400px" }, time, function () {
                $(idqiu).css("background-color", "yellow ");
            }).animate({ top: "80px", left: "450px" }, time, function () {
                $(idqiu).css("background-color", "yellow");
            }).animate({ top: "480px", left: "500px" }, time, function () {
                $(idqiu).css("background-color", "blue");
            }).animate({ top: "100px", left: "550px" }, time, function () {
                $(idqiu).css("background-color", "green");
            }).animate({ top: "460px", left: "600px" }, time, function () {
                $(idqiu).css("background-color", "red");
            }).animate({ top: "120px", left: "650px" }, time, function () {
                $(idqiu).css("background-color", "indigo");
            }).animate({ top: "440px", left: "700px" }, time, function () {
                $(idqiu).css("background-color", "violet ");
            }).animate({ top: "140px", left: "750px" }, time, function () {
                $(idqiu).css("background-color", "aqua ");
            }).animate({ top: "420px", left: "800px" }, time, function () {
                $(idqiu).css("background-color", "yellow ");
            }).animate({ top: "160px", left: "850px" }, time, function () {
                $(idqiu).css("background-color", "red ");
            }).animate({ top: "400px", left: "900px" }, time, function () {
                $(idqiu).css("background-color", "violet ");
            }).animate({ top: "180px", left: "950px" }, time, function () {
                $(idqiu).css("background-color", "indigo ");
            }).animate({ top: "380px", left: "1000px" }, time, function () {
                $(idqiu).css("background-color", "blue ");
            }).animate({ top: "200px", left: "1050px" }, time, function () {
                $(idqiu).css("background-color", "red ");
            }).animate({ top: "360px", left: "1100px" }, time, function () {
                $(idqiu).css("background-color", "yellow ");
            }).animate({ top: "220px", left: "1150px" }, time, function () {
                $(idqiu).css("background-color", "aqua ");
            }).animate({ top: "340px", left: "1150px" }, time, function () {
                $(idqiu).css("background-color", "indigo ");
            }).animate({ top: "240px", left: "1200px" }, time, function () {
                $(idqiu).css("background-color", "violet ");
            }).animate({ top: "320px", left: "1250px" }, time, function () {
                $(idqiu).css("background-color", "blue ");
            }).animate({ top: "260px", left: "1300px" }, time, function () {
                $(idqiu).css("background-color", "red");
            }).animate({ top: "600px", left: "1330px" }, time, function () {
                $(idqiu).css("background-color", "green");
            }).animate({ top: "-400px", left: "1330px" }, time);
        };

    </script>
</head>
<body>
    <input type="button" value="点我" id="dw" />
    <div id="zhezhao"></div>
    <div id="qiu1"></div>
    <div id="qiu2"></div>
    <div id="qiu3"></div>
    <div id="qiu4"></div>
    <div id="qiu5"></div>
    <div id="qiu6"></div>
    <div id="qiu7"></div>
    <div id="qiu8"></div>
    <div id="qiu9"></div>
    <div id="qiu10"></div>
</body>