jQuery点击按钮元素移动（动画）

最新推荐文章于 2024-06-15 20:48:16 发布

yangxh11111

最新推荐文章于 2024-06-15 20:48:16 发布

阅读量3.9k

点赞数 1

分类专栏： jQuery 文章标签： jquery 动画移动

本文链接：https://blog.csdn.net/yangxh11111/article/details/53520251

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery 点击按钮元素移动（动画）

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;

        }
        .box2{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 100px;
            left: 50px;

        }
    </style>
    <script type="text/javascript" src="jquery-3.1.1.min.js">   
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                // 不同元素的动画同时进行                                                                                                                                
                $(".box1").animate({"left":500,"top":100},3000);
                $(".box2").animate({"left":100,"top":600},3000);
            })
        }) 
    </script>
</head>
<body>
    <button>按钮</button>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

yangxh11111

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
jQuery点击按钮元素移动（动画）

jQuery 点击按钮元素移动（动画） <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px
复制链接

扫一扫

专栏目录