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

来源：互联网发布：单纯的js做动态网站编辑：程序博客网时间：2024/06/07 21:30

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>

1 0