jquery实现animate的使用

来源：互联网发布：网络化学编辑：程序博客网时间：2024/05/16 10:16

<title></title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <style type="text/css">
        .imgclass
        {
            width: 100px;
            height: 100px;
            border: solid 1px red;
            position: absolute;
            left: 20px;
            top: 20px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('img').click(function () {
                $(this).animate({ left: '+=130px' }, 2000).animate({ left: '+=130px' }, 2000).animate({ top: '+=130px' }, 2000).animate({ left: '-=130px' }, 2000).animate({ left: '-=130px' }, 2000).animate({ top: '+=130px' }, 2000).animate({ left: '+=130px' }, 2000).animate({ left: '+=130px' }, 2000, function () {
                    $('img').hide(5000);
                })
            })
        });
    </script>
</head>
<body>
    <div>
        <img alt="" src="images/1.jpg" class="imgclass" />
        <table border="1" width="400px" height="400px;">
            <tr id="table1">
                <td align="center">
                    1
                </td>
                <td align="center">
                    2
                </td>
                <td align="center">
                    3
                </td>
            </tr>
            <tr id="table2">
                <td align="center">
                    6
                </td>
                <td align="center">
                    5
                </td>
                <td align="center">
                    4
                </td>
            </tr>
            <tr id="table3">
                <td align="center">
                    7
                </td>
                <td align="center">
                    8
                </td>
                <td align="center">
                    9
                </td>
            </tr>
        </table>
    </div>
</body>