jQuery animate

最新推荐文章于 2023-12-18 10:35:42 发布

ytm1996

最新推荐文章于 2023-12-18 10:35:42 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ytm1996/article/details/81018094

本文介绍了一个简单的网页示例，通过使用jQuery库来实现HTML页面中div元素的放大和还原动画效果。此外，还展示了如何通过点击按钮触发不同的动画，并在动画完成后更新提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           $(function(){
               $("#btn1").click(function(){
                   $("#tip").text("")
                   $("#box").animate({"height":"200px","width":"200px","left":"100px","top":"100px"},2000,function(){
                       $("#tip").text("放大动画完成")
                   });

               })
               $("#btn2").click(function(){
                   $("#tip").text()
                   $("#box").animate({"height":"100px","width":"100px","left":"0px","top":"0px"},2000,function(){
                       $("#tip").text("还原动画完成")
                   })
               })
               $("#closead").click(function(){
                   $("#ad").animate({"bottom":"-200x"})
               })
           })
       </script>
   </head>
   <body style="margin: 0px;padding: 0px;">
   <button id="btn1">放大</button>
   <button id="btn2">还原</button>
   <div id="box" style="background: #4087f1; height: 100px; width: 100px; position: relative;"></div>
   <div id="tip"></div>
   <div id="ad" style="background-color: dodgerblue; color: wheat; position: fixed; bottom: 0px; width: 100%;"><div id="closead" style="text-align: right;color: #81aff5; cursor: pointer;">x</div>
   <div >
       中华人民共和国
   </div>
   </div>

   </body>
</html>