jquery实现animate的使用

最新推荐文章于 2022-05-19 08:46:53 发布

耿宇丹

最新推荐文章于 2022-05-19 08:46:53 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery内容

本文链接：https://blog.youkuaiyun.com/gengyudan/article/details/8892219

Jquery内容专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的图片点击动画效果，并展示了一个简单的表格布局示例。通过CSS样式设置，定义了图片的初始位置及外观，利用jQuery动画方法使图片在被点击时移动并最终隐藏。

<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>