python前端基础--jquery动画01

最新推荐文章于 2020-12-30 10:28:45 发布

白杨树~

最新推荐文章于 2020-12-30 10:28:45 发布

阅读量145

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/qq_42336700/article/details/82118778

版权

html 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
       <script>
           $(function(){
               $('#btn').click(function(){
                   $("#div1").fadeIn();

                   $("#div2").fadeIn("slow");
                   $("#div3").fadeIn("fast");
               })
               $("#div1").click(function(){
                   $("#div1").css("opacity","1")

})

           })
       </script>
       <style>
           div{
               margin-bottom: 10px;
           }
       </style>
   </head>
   <body>
       <button id="btn">点我显示</button>
       <div id="div1" style="opacity:0.5;width: 80px;height: 80px;background: red;display: none;"></div>
       <div id="div2" style="width: 80px;height: 80px;background: green;display: none;"></div>
       <div id="div3" style="width: 80px;height: 80px;background: blue;display: none;"></div>
   </body>
</html>