jquery animate动画效果的例子

发布时间:2020-04-16编辑:脚本学堂
分享一例使用jquery中animate函数实现动画显示效果的例子,学习下jquery animate函数的用法,有需要的朋友参考下。

jquery animate动画效果,如下图:
jquery animate动画效果

完整代码:
 

复制代码 代码示例:
 <title>animate动画效果_脚本学堂_http://www.jb200.com</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>
    以下内容,用于显示jquery中animate函数的动画效果。
        <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>